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.
Related
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
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?
I use Sublime Text 3.0 to code html-based website. As indicated by my username, I'm not much of an expert. I'm having trouble adding an image with sublime text 3.0 using the latest google chrome browser version 44.0.2403.130 m and I run windows 8.1 pro (still waiting for the upgrade to w10 Dx) anyway, I'm pretty sure my software isn't the problem. I can upload images using a externally linked image such as
http://www.examplesite.com/picture.gif
and it will appear but when I try to upload from my own directory as such
<h1><img src="Logo.jpeg" alt="Logo"/>Prespective News</h1>
It will not show up on my web browser, it just shows the alternate text of Logo, is there something wrong with my code? Please help me, I've spent at least 4 hours. trying to figure it out! also it's all my pictures, not just 1.
The image is in the same directory as my HTML file is. When I do the F12, it shows an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users/Owner/Documents/My%20Web%20Sites/Website%202/Logo.jpeg
This is confusing because this is exactly where my file is in:
C:\Users\Owner\Documents\My Web Sites\Website 2\Logo.JPEG
The html file is in
C:\Users\Owner\Documents\My Web Sites\Website 2\idk yet.HTML
The img src URL you provided was probably incorrect. If you open chrome dev tools (F12) you should be able to see (on the network tab) where the image source you are trying to fetch is. Then you can compare it to the path your image actually resides.
Things you can do:
Check if the name matches the one you provide exactly (case sensitive)
Remember the sources you link are relative to your page, so if you put it in a folder it might need to be src="images/Logo.jpeg"
You might be using jpg instead of jpeg, please check that also.
When coding a website you should keep all the required images in a separate image folder and use the source address appropriately.
Suppose you have an image folder in your current working directory then use
img src="image/logo.jpg" />
The reason for this error is your image not found in your specific folder.
Provide correct folder name for the image path. This issue can be easily solved. Use Firebug or F12 keys for troubleshooting.
I usually put my images in a folder aside to the html file so in the same directory
<img src="images/image.jpg" alt="image" title="image of an image" /> <h1>Titre1</h1>
Try it this way maybe. I would seperate the title h1 from the image.
If it doesn't show up it's because Logo.jpeg isn't in the same directory. Since your file name is Logo.JPEG it should be:
<h1><img src="Logo.JPEG" alt="Logo"/>Prespective News</h1>
Capitalisation matters.
I found out what I was doing wrong. Turns out the file is a JPEG but for some reason it's extension is .JPG not with an E. I'm not sure why it's not listed as a .JPEG since the file type is JPEG, anyway thank you for your responses ya'll! I probably wouldn't have figured it out if I wasn't responding and looking at the picture information xD
Easy question - very tired to find the answer.
I am doing the following :
a(href="https://github.com/xxx")
img#github-banner(style="position:absolute;top:0px;right:0;border:0;", src="app\public\img\logo_github.png", alt="View our project on GitHub")
The image src here is changed between both project path and full path, but all I get is broken image and alternate text in that order. Whats the error?
Also any good way to debug these issues ?
The problem is probably not with your code, but with the path to your image.
I assume you're using Express, and I'm guessing your app/public folder is pointed to by an express.static() middleware. This is the default in most cases.
If that's all true, then the path to your image should just be /img/logo_github.png. Try navigating to that in your browser first (with your app running, of course) and see what you get.
How do I to make an absolute URL that refers an image into my root repertory app ?
I've tried this using /projetForum/WebContent/images/angry.gif as URL but it doesn't work.
str = str.replace(":D", "<img src=\"/projetForum/WebContent/images/angry.gif\" title=\"heureux\" alt=\"heureux\" />");
Thanks in advance.
When looking closer at the URL which you attempted to use, the presence of /WebContent folder is suspicious. This is recognizable as default web content folder name of a typical Eclipse web project. This in turn suggests that you actually used a local disk file system path relative to the IDE workspace root folder in the <img src> and somehow expected that it represents a valid URL.
This is wrong. It's the webbrowser who has got to download the image by a valid URL once it encounters the <img> element while parsing the obtained HTML output. It's not the webserver who has got to magically inline the image's content based on local disk file system path or so. That's not how HTML works.
Provided that the webapp's context root is projectForum (and thus the whole webapp is available on http://localhost:8080/projectForum/), then the image should be available on the following URL http://localhost:8080/projectForum/images/angry.gif. Try it in your browser's address bar first.
Once you found out the right URL, then you should substitute exactly that absolute/relative path in the image's URL so that the generated HTML output ends up like this:
<img src="/projectForum/images/angry.gif" />
By the way, the smiley :D does not look like angry to me.