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>.
Related
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.
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 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 a website hosted by Github and I am having issues with displaying pictures. I recently tried to upload new pictures but despite the path being right, the page fails to load the images and gives a 404 error in the source as it tries to find the path. Here is the repo of my site: https://github.com/jeanturban/jeanturban.github.io
I think it might have something to do with Picasa as when I download a picture from the internet and update the path accordingly it works fine. But when I try to use pictures from my computer, or if I try to export from Picasa to my "img" folder, then it breaks. Perhaps Picasa is making a hidden folder upon exporting the pictures that is not being uploaded? Anyone have any insight on this? Or a workaround?
It looks like your images are not loading due to the wrong file extension. You are trying to load "http://jeanturban.com/img/Current/light1.jpg" when it should be "http://jeanturban.com/img/Current/light1.JPG" -- notice the capital JPG at the end.
The issue in my case was my images where in a .attachments folder (coming from Azure DevOps) and I guess GitHub pages skipped hidden folders.
I had same issue but image case was not problem.
What fixed it was shortening image file name from 26 characters with three underscores to 16 characters and one underscore.
I had to change the path for where my media files were stored for my case:
before my file setup was:
-myusername.github.io
-->index.html
-->index.css
->media
-->myImage.jpg
after I changed it to the setup below, it worked:
I had to change it to this:
->myusername.github.io
-->index.html
-->index.css
-->media
--->myImage.jpg
I have made a picture link with this code snip:
<a href='feed.php'><img src="C:\xampp\htdocs\Project\Icons\Feed.png"/></a>
But no picture appears on my page, why?
(I'm currently only using my page locally!)
It's because you (are trying to) use a local file reference.
Either use the relative path
or
<a href='feed.php'><img src="file:///C:/xampp/htdocs/Project/Icons/Feed.png"/></a>
Please be aware that if you plan to use this 'online' it will fail because of the LOCAL reference.
If you load the page through your webserver you should use:
<a href='feed.php'><img src="/Icons/Feed.png"/></a>
Or
<a href='feed.php'><img src="http://yoursite.local/Icons/Feed.png"/></a>
Or whatever the path to the image is.
I would prefer the relative path (the first) though which enables you to move your page to another domain without your links / images breaking.
You can't link local files from a remote web page. This is to prevent webpages from accessing files on the end-user's computer.
Change this: C:\xampp\htdocs\Project\Icons\Feed.png
To this: http://yourwebsitehere.com/Project/Icons/Feed.png
EDIT: Since you say its only used locally, then you need to use this instead:
file:///C:/xampp/htdocs/Project/Icons/Feed.png
Also, make sure the image is actually located where you think it is!
Try typing file:///C:/xampp/htdocs/Project/Icons/Feed.png into your browser's address bar and see what happens.