I received a 404 error and the image doesn't load. I'm quite sure that the path is correct
<img src="../assets/img/Logo.png" alt="Logo">
Here you can see my Folder Structure
If the image doesn't load, most likely the path is not correct.
Did you try /assets/img/Logo.png?
The other possible reason is a server misconfiguration, but I'm assuming that this error is occurring in the development server, so that wouldn't apply.
Related
I'm having trouble setting up the proper paths for my website, using 'href', I keep getting the 404 error when I'm on the github pages for it, but while developing on live server it works perfectly, making it hard to get what am I doing wrong. for example, on the root of the site I have the index.html and a couple other pages, those work with no problems, but then I created a folder to hold the other pages (called 'sub-pages') but everything I put on there does not get redirected at all, giving me the 404 error. for example, If i do href="index.html" it works, but if I do href="pages/sub-pages/page" I get 404'd while on the gitpages but on the live server it works no problem
The way a path is interpreted is different according to the system.
Try href="./[subfolder]/page.[extension]"
I have tried using Express, inside WebStorm, where I have a sample html file, with this content
<h2>About</h2>
<img src="/public/img/download.jpg" alt="picture">
this does not appear to be working, with a folder directory like this
Does anybody know why the image can't load properly?
what do you mean saying that the images are not loaded? is it about paths resolving in IDE or in browser?
public is marked as Resource root, so that the paths are resolved relative to it. To have the IDE resolve paths like "/public/img/download.jpg", you need to mark a parent folder of public as Resource root.
If you have a problem loading your image in browser, it's an issue with the web server being used. Leading slash in URL tells the browser to resolve the URL from web server root. If the server can handle URLs like <server address>/public/img/download.jpg, image will be loaded, otherwise 404 error will be thrown
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.
I have to upload an image onto my HTML page from my local disk, which I know now is not possible because of the security reasons and the same origin policies.
1.) My image 'loadingimage.jpg' is at the same location as my .html page.
I did try relative paths like
<style>
body {
background-image: url("/loadingimage.jpeg");
}
</style>
and it gives me error like
Failed to load resource: the server responded with a status of 404 (Not Found)
http://10.2.9.208:8081/loadingimage.jpg
I do not get this error when I open files directly, only when I am using node js express to serve this html file from my disk. I have this code in my node js
app.get('/abt', function (req, res) {
res.sendFile(path.join(__dirname, '../../startpage.html'));
});
Please do not downvote this question as a duplicate as I have gone through all the links and have not been able to find a solution.So, I am reposting it. Can this be done without conversion to base64 codes? What do I do?
2.)But even if I somehow manage to display it on my browser, I want all the clients browsing my webpage to be able to see it, like suppose a WELCOME image. How do I make it possible?
I am not allowed to use any image hosting servers on the web. Can I do something like accessing the client PC and storing the image locally there, using it and then deleting it when the page is closed?.
I have a server machine running in the background, Is it in any way possible to store these images on the server and then retrieve it and display it on the client PC?
EDIT 1:
I tried using this
<img class="logo" src="http://10.2.9.208:8081/loadingimage.jpg" alt="My_Logo">
This now, not only gives me the same error, but also displays a broken image.
the fiddle for this : https://jsfiddle.net/SuchitraIyer/sno3j98w/
If your image on same location with your page / same folder and spell image name correctly then try the below code:
body {
background-image: url("3011483-euro2016-omb-pes2016_1.jpg");
}
you just need to remove forward slash from the start of filename...
I hope this will help you...
Thanks...
If your HTML FILE and IMAGE are in the same folder then
background-image: url("YOUR-IMAGE-NAME");
Other than if you create any folder
--FOLDER/YOUR-IMAGE-IMAGE
-HTML file
code would be like this.
background-image: url("FOLDER/YOUR-IMAGE-NAME");
The Alternate method you can use this with your full PATH starting with file:///.
file:///C:/imagename
I HOPE THIS ANSWER HELPS YOU.
Put your image into a folder, and then type the path and see
like
body {
background-image: url("images/loading.jpg");
},
since you are using node.js, this thread might help you
How to serve the image files using express framework in node.js?
body {
background-image: url("../../loadingimage.jpg");
},
This worked for me only when I transfered my image to the same location as my node js file, nothing else worked though it should have.
I am making a webpage and I am including these images, when I run the page off of notepadd++ everything works fine but after I upload it to the server and I try to run it, the images are broken and I am getting this message on the console : Failed to load resource: the server responded with a status of 404 (Not Found)
<a href="games/rockpaper/main.html"><img class = "rock" src="images/rockpaper.JPG" alt="Thumbnail of the rock-paper-scissors game"><a>
<a href="games/typing/TypingTest.html"><img class = "typing" src="images/typing.JPG" alt="Thumbnaul of the typing test game"><a>
Although I'm not entirely sure what you're saying in your comment. I suspect two things:
Make sure that your image src is relative to your actual directory layout. For example if the file that contains that code is in "home", make sure that your images are in "home/images/xx.JPG"
If you're developing on a windows computer and hosting on a unix server, make sure that the case of the directories and files are identical. Windows is not case sensitive where as unix is. If you uploaded typing.jpg and are looking for typing.JPG, it will not find it.
The JPG as the end of the src link needs to be lower case. for example
src="images/rockpaper.JPG"
should be
src="images/rockpaper.jpg"
You need to close them with </a>, not <a>.