i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.
Related
I am using the following code to display the image on my website:
<img src="/logo.jpg" alt="Image1">
The image is on my hard drive. However, the image is not displayed.
I have searched all over the internet and check the folder and path to be correct. The image is in the same folder as my HTML file.
I tried to upload the image in google drive and google photos and provide the HTML link however still I could not be able to display the image in both Chrome and IE.
Can anyone explain what can be the solution?
Is your image stored in the OS root directory?
If it's in the same folder as the html file then you want to remove the / at the beginning (or change it to ./)
/[filename] means file at the root of the OS/server (analogous to C:/ in Windows)
./[filename] means file in the current working directory (as does just [filename])
../[filename] means file in the parent directory
I am working on embedded website that will be served by a device running Linux. We are trying to maintain a system where editable items are in root/var/data/.. and static files are in root/opt/..
Right now my server.js is located at root/opt/webapp/server.js, i have an html file at root/opt/webapp/html/file.html
in the file.html i need to render images that are in the root/var/data folder, but my understanding of now this works is node considers localhost at root/opt/webapp(the location of server.js) how do I tag to a file that is outside of said local host but still within the file directory of the device?
I attempted an absolute path but the html just assumed that it should start the chain from localhost so
looks at http://localhost:8080/file:/C:/projects/root/var/data/fms/share/icons/avocado.png
The var folder is two folders up from your .html file, so it sounds like you're looking for either:
../../var/data/fms/share/icons/avocado.png (relative)
/root/var/data/fms/share/icons/avocado.png (root-relative)
It depends on how you're linking to the file, but you may also be able to use the absolute path relative to C::
file:///C:/projects/root/var/data/fms/share/icons/avocado.png
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
Apologies if this is an idiotic question: I used the following src declaration within an img tag to display an image on a Bootstrap website in phpstorm under a laravel blade file: src="C:\Users\MAHE\Pictures\Wallpapers\photo.jpg".
The image does not display; it's just invisible because the mouse pointer is showing the hand symbol when hovered; however, the image displays perfectly when the src declaration is:
src="http://weknowyourdreamz.com/images/apple/apple-02.jpg"
The first link is pointing locally (C: drive). Are you using a localhost or displaying it locally or is it live on a server?
If your website is hosted locally:
Use a relative path, example: images/file_01.jpg
If your website is live:
Use a link to an image that is on a server, as the path is meaningless in this context.
EDIT:
(Elaboration on relative paths to give more clarity as per comment)
The location for the relative path would be wherever the file is in relation to the file that you are trying to link from, so you would need to host the file with the site in order to achieve this. The link itself would depend on your file structure, a typical link would read such as: ../images/cat_01.jpg (the preceding "/" , "./", "../" represent Root directory, current working directory, and parent directory, respectively).
This Link provides a good summary of Relative vs Absolute paths.
If you cannot achieve this then host the image wherever you can and provide the entire URL for the image. Example src="http://www.forexample.com/images/cat_01.jpg".
As you should now be able to see, this is why the second link works. Your file can actually access this image whereas the first link points to a specific location on a computer - this makes no sense in a web environment.
After i hosted my HTML5 application on Apache tomcat.My page is not showing any background image.
I have placed my project folder (MyExpert) inside root folder and inside MyExpert folder there is an image folder and a css folder .I am giving background image as
background-image:url(../images/myprofile_on.png)
in my css file but images are not coming on my pages except home page.Though application is working fine on localhost.I tried various thing but no fruitful result.
it looks like it will be a simple referencing or permissions issue here, try nivgating directly to the image in your browser and see if you can navigate to it manually so is this case given your description it would be:
http://www.yourdomain.com/MyExpert/images/myprofile_on.png
If that works then its a simple referencing issue from you css file, if it returns a forbidden access page you know its permissions, if it returns a file not found I would recommend checking the casing on your CSS url to ensure it matches the file path as if your box is linux then file paths are most likely case sensitive.