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
Related
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.
I'm having trouble getting an image loading on my website.
When I had the "images"-folder in the same folder as my html this code managed to load the image successfully.
<img src="/images/progressive.jpg" width="400" />
However, I want to put the "images"-folder up one directory. So I move the folder and change the path to:
<img src="../images/progressive.jpg" width="400" />
but it fails to load, any idea why that is?
My vs code extension is "autofilling" the path so it recognize the file, which should mean that the path is correct.
I just found the issue. I'm using the VS code extension "Live server" which seemingly can't find files up one directory. When I open the .html file from the file explorer instead of using the "Live server" the images load successfully.
Location of image defined as /images/progressive.jpg for current page location https://website.com/path/subpath/page.html will use full image address as https://website.com/images/progressive.jpg
But, for location of image defined as ../images/progressive.jpg and the same page location (https://website.com/path/subpath/page.html) you will receive image address https://website.com/path/images/progressive.jpg
Maybe this is a problem?
So I have this HTML code:
<img src="C:\Users\Nico\Documents\Sublime\Proyecto Tics\templates\logo.png" width="30" height="30">
I've tried several things to make it work but it just won't load the image, the file path is correct and when I open the HTML file and get the image path then put it into chrome it opens the image perfectly. I've also tried using "logo.png" as the source but it wouldn't work either when I copied the image path it wasn't correct so ended up specifying the whole path. Whatever I specify as path doesn't seem to load.
Don't use file system absolute path in html.
Refer HTML File Paths
C:\ is not an actual path naming convention. It is just something Google Chrome has, try using a relative path.
I am trying out CSS's shape-outside:
shape-outside: url(image_file.png)
Example: https://jsfiddle.net/quzaorg0/3/
However, if I tried this example on the local machine (and used the path just as pikachu300.png for the HTML and CSS), and opened up the HTML file in Google Chrome or Firefox using the file system, then it wouldn't wrap the text around the image.
I had to start a local web server (any local web server, or simply by using ruby -run -e httpd . -p 8080), so that the CSS was able to get that image and wrap the text around the image.
The HTML and CSS had proper URL path, which is just the filename:
The CSS:
#intro-img { float: left; shape-outside: url(pikachu300.png); }
The HTML:
<img id="intro-img" src="pikachu300.png">
So the HTML could load the image, but the CSS couldn't load that image. It had to be served by a local web server.
I tried also
#intro-img { float: left; shape-outside: url(file://pikachu300.png); }
and it didn't work either. Why would the path work for HTML but not CSS, and how to make it work if it is tested as local files?
P.S. in the Developer Console, Network tab, the file cannot be loaded the second time. If I run a web server, the file can be loaded both times:
I ran into this exact problem on a project of my own today.
This behavior is an idiosyncrasy having to do with file permissions via FTP vs. HTTP. The solution is to run a local http server rather than using file:/// when working locally. Only under HTTP does the browser have permissions to read pixel transparency.
(#V.Volkov's comments on the original post give the solution, but I thought I would post the answer so that future users don't have to dig through the comments like I did.)
I can See the problem. usually for relative path for current directory we refer it as ./dir/file but for this case just omit . to become /dir/file this worked for me.
In other words use url("/dir/file") instead of url("./dir/file") once referring to local files in current directory in CSS.
When using url() to point to your local file, if its within the same project folder, you need to refer it relative to where the CSS is located.
background-image: url('./imagename.jpg'); // Image is within the same folder with the CSS
background-image: url('./../imagename.jpg'); // Image is located outside the folder where css is located.
background-image: url('./../image/imagename.jpg'); // Image is located in another folder relative to the css folder.
For retrieving image in folder inside computer (outside the project scope), you can use direct path to that path instead. Right click on the image --> Property --> Location to get the path to the image. Make sure you change the path's \ to / on the URL.
background-image: url('C:/Users/{user}/Downloads/{imagename}'); // Image is located inside the Downloads folder
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.