I am using VSCode and I am trying to add an .svg file to my project but it is not appearing on the Live Server. I used the same code just different file name as the other assets and it the file just will not appear.
Here is the JSFiddle of my project: https://jsfiddle.net/sillybrownboy/netgLq94/14/
'''
<img class="about_1"
src="images/about_icon.svg">
'''
I obviously had to host my .svg files and .png files in order to get it to work but I left the code for the "about_icon.svg" the same at the bottom of the HTML.
I would check path where the about_icon.svg image is being stored. On your JSFiddle code, all the images are showing an absolute path, where the about_icon.svg is showing a relative path, in relation to that specific web page. If the about_icon.svg image is being stored on a remote server, similar to the other images, then you want to change the src location for the about_1 image to an absolute path, not a relative path.
Also, from my experience, I have forgotten to upload images or uploaded to a wrong location on the server, and have wondered why they weren't displaying.
Related
code:
Why am I not able to see any image here to open amazon?
NOTE: image is saved as th.jfif on my desktop and not in any folder
was expecting to see the image
The issue you are having is very likely due to your image not being in the correct location from where your img is expecting it to be.
I would say take the image from your desktop and place it in a folder, maybe called site. Then put your HTML file and image file in the same site folder and load your page again. Then your path mapping should be accurate and your image will render.
I say it is your path mapping because rendering your HTML link using an online image works just fine.
<img src="https://turnerduckworth.com/sites/default/files/styles/case_study_single_image_s_2x/public/2019-03/5_Amazon_Lettermark_2560.jpg?h=a92f03cd&itok=2nBmNv14" alt="website" width="100">
Surely this is to do with having no file or folder structure. Your image and web page must be detailed relatively to each other.
<img src=" path to the image from the web page location ">
If your web page has a folder with it called images and inside it are all your.... images.
The path will be
src="images/picture-title.jpg"
Read about file structure. To begin with, put your web page inside a folder of it's own and also in that folder create an images folder.
I suspect the path does not match the location of the image you saved. the whole tutorial is on here .
for the example, you saved your image in path images , so you should should type it like this:
<img src="/images/th.jfif.jpeg">
and don't forget to write down the image file extension clearly. hope its help
I have a problem with live server in VS Code .
When I use a background image in my HTML code, it works properly when I open that file without live server. But when I try to open it using live server it dosn't show background images.
1. here is my html code
my html code
2. here is the output when i open it chrome without live server
output in chrome without live server
here is the output when i open it using live server
output using live server
you should use either 'relative' paths of 'absolute' paths. Which means starting with a '/' (absolute) , or with a dot, '.' (relative).
On a live server environment a '/' points to your root website dir.
Make sure the image is in the same folder of your html, or a subfolder.
Your live server can not access your E: drive.
<img src="/image-in-root.jpg" alt="image in same dir as index.html"/>
or
<img src="./image-in-root.jpg" alt="image in same dir as index.html"/>
or
<img src="../../image-2-dirs-up.jpg" alt="image 2 dirs up from this file position"/>
or
<img src="/images/image-in-image-dir.jpg" alt="image in /image dir from root"/>
or
<img src="./images/image-in-image-dir.jpg" alt="image in /image dir one level below current"/>
There could be a few reasons why your HTML background image is not showing up when you use a live server in Visual Studio Code. Some possible causes include:
The path to the image is incorrect: Make sure that the path to the image file is correct and that the image file is located in the specified location.
The image file is not in a supported format: HTML supports a variety of image file formats, including JPEG, PNG, and GIF. Make sure that your image file is in one of these formats.
The image file is not properly encoded: If the image file has been improperly encoded, it may not display correctly.
There is a problem with the live server: If you are using a live server extension in Visual Studio Code, there may be an issue with the extension itself that is preventing the image from being displayed.
To troubleshoot these issues, you can try the following:
Check the path to the image file: Make sure that the path to the image file is correct and that the image file is located in the specified location.
Check the image file format: Make sure that the image file is in a supported format (JPEG, PNG, or GIF).
Check the image encoding: If the image file has been improperly encoded, it may not display correctly. Try re-saving the image in a different program to ensure that it is properly encoded.
Restart the live server: If you are using a live server extension in Visual Studio Code, try restarting the server to see if that resolves the issue.
Use the relative path for this problem of vs code live server.
If you are using external CSS then also use the relative path if the image is in the same folder or use the absolute path(full path) of the image if it is in another folder.
See the Output of my code I have to use the relative path of the image CLICK HERE TO SEE!
This output is with the absolute path (Full Path) of the image CLICK HERE TO SEE!
Relative Code
Absolute Code
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.
I cant seem to get my image to display on my webpage using a relative path. Im using the program "brackets" to do all of my editing before uploading to the webpage. Below is the relative path that i'm using and when I hover over the path the image thumbnail displays. but it still wont display on the page... am I missing anything? please and thank you.
<img id="01" class ="tn leftcol" width = "150" height = "150"
src=".//Images/IMG_3604.JPG" alt="1" />
there are two slashes. this can be interpreted as a protocol. Change the src to Images/IMG_3604.JPG
If this is being populated via a variable, check the source text or environments
There are two forward slashes. It should be ./Images/xxxxx.png not .//
If you have to go out of a directory, use ../ if the image folder is in the folder you are currently in use nothing.
Src="Images/IMG_3604.JPG"
Your html file is in the same directory.
Src="../Images/IMG_3604.JPG"
Html file is in a subdirectory and you need to go outside of that folder to get to images.
Src="../../Images/IMG_3604.JPG"
Html is in a subdirectory of a subdirectory and you need to go outside of both to get to the Images folder.
Hope this helps.
I have an image which should be displayed on all the pages....it is working perfectly fine for all the pages except for a single page. On Inspect it shows could not load the image.
<div class="wrapper">
<img src="images/uk.png">
</div>
From the look of your code, my guess is that it appears to be a relative path problem. The page in which you cannot load the image successfully is probably in a different folder to the pages where you can load the image successfully.
<img src="images/uk.png"> is a relative link. According to that link usage, the file uk.png needs to be in the folder images, and the folder images needs to be in the same folder as the file you are trying to include the image on.
If your images folder is not a sibling of the file you are trying to include the image on, you have three options:
use ../ to navigate to the correct folder (<img src="../images/uk.png">)
use the root-relative / prefix (<img src="/images/uk.png">)
use an absolute URL (<img src="http://www.example.com/images/uk.png">)
For more information about relative paths, check out CSS Trick's article, Adobe's article, or IfYouCodeItTheyWill's article.
If you have ensured that your index file is indeed in the correct location, and your path is indeed correct, you may have a caching problem. Try holding SHIFT while clicking the refresh icon, and see if that works. If not, you can bring up your console with F12 to further debug the problem.
Hope this helps! :)