href works locally but not on website Options

[Columbo]

I put href in topic title but meant to put <img src=.
I am putting together a website using html and css and I am using Brackets for the editor. I have a navbar (css) with 4 links on it and they are all working properly on the website. One of those links in the navbar points to another page (page 2) on the site. That other page contains a link to an image that is in a folder called dino_images. The link code that I am using is:

CODE

<div class="picture">
     <img src="dino_images/anomalocaris.jpg" alt="anomalocaris">      
  </div>

When I run the code locally in Brackets, it runs fine and displays the images properly. When I upload the files to the website the images do not display and it shows a broken link. The structure on the website is identical to the folder on my hard disk that Brackets is using to run the code locally. The dino_images folder is on the website and the image does exist in the dino_images folder with the correct spelling. I've been playing around with this thing for a whole day and I can't figure out why it running properly locally but is indicating a broken link on the website. The path is correct.

Any suggestions appreciated.

This post has been edited by Columbo: Jan 6 2024, 09:25 PM

[pandy]

What error message do you get?

If a 404 I don't understand since you have already checked all possible causes. If the image is corrupt and not loaded for that reason you should get another message. Can you view the image if you go directly to it with a browser? I.e type the full URLto it in the nav bar.

If you can, please post the URL the page with the link to the image.

[Christian J]

That other page contains a link to an image that is in a folder called dino_images. The link code that I am using is:

CODE

<div class="picture">
     <img src="dino_images/anomalocaris.jpg" alt="anomalocaris">      
  </div>

Technically that's an IMG element, not a link.

The structure on the website is identical to the folder on my hard disk that Brackets is using to run the code locally. The dino_images folder is on the website

Is it in the same folder as the HTML file?

and the image does exist in the dino_images folder with the correct spelling.

Note that URLs are case-sensitive (but not on Windows' file system).

See also https://htmlhelp.com/faq/html/images.html#broken-image

[pandy]

The OP said the file structure and case are the same. And, provided the whole bunch was uploaded at the same time as the content of a folder, it's hard to see how anything could go wrong with that. If the files were uploaded one by one, well, it's easier to so how mistakes could happen.

But if we can see the actual page we hopefully can figure it out.

[Christian J]

The OP said the file structure and case are the same.

I saw nothing about case.

But if we can see the actual page we hopefully can figure it out.

True, that's the easiest method.

[pandy]

I assumed "correct spelling" included that. But you are right. Sorry, I only thought about the same case locally and on the server.

Columbo, assuming the you are on Windows there could be a case mismatch between the file name and the URL and it would still work locally since Windows isn't case sensitive, I.E the image could be named Anomalocaris.jpg, anomalocaris.JPG or have some other letter or letters in upper case. It would still work on Windows but not on most servers. Have you checked that?

[Columbo]

Thank you for all the responses. It appears that the image file might have been corrupt. I finally did what I should have done long ago and uploaded the image to the website again and it now displays ok. Not sure why it was showing as a broken link though.

[pandy]

You mean you got an error message? Browsers don't load corrupt images (or if it is the server that doesn't serve them...). IIRC the message you get depends on the browser. I seem to recall some browser gives you some information about the error and others say something more generic.