My Development Notes

Programming Made Easier


How to fix HTML Image Tag not working?

I’ve assumed that you didn’t make any typo errors while using the image source. I’m also assuming that you’ve properly linked to the image source whether it’s from the internet or a specific folder.

This hack pertains to the images not loading from a directory where you have kept the images.

So, the cheat is very simple! You need to get into the directory using an universal method. And the best way to go is to use the ./ or ../ pattern. Let’s first look at an example and then see this in action:

|--- ProjectFolder
     |---index.html   // image displayed here
     |---styles.css
     |---imagesFolder
        |---imageOfCat.jpg  // the image 

Here, in order to display the imageOfCat.jpg on the index.html page we have to use the following code:

<!--inside index.html-->

<img src="./imagesFolder/imageOfCat.jpg" alt="a cat photo" />

Here, we’ve used ./ in the beginning to track the path of the image source. It’s universal and the appropriate thing to do.

Let’s take another case:

|---projectFolder
    |---imagesFolder
    |    |---imageOfCat.jpg  // the image
    |---index.html
    |---subFolder
         |---catArticle.html // image displayed here

Here we have to use the following code:

<!--inside catArticle.html-->

<img src="../imagesFolder/imageOfCat.jpg" alt="a cat photo" />

Now, here we have used (../) i.e., two dots, why? Because catArticle.html page has to pull the image by first going back to the main branch parallel to index.html (first dot for this) and then enter the imagesFolder to get the image (second dot for this), two dots for the two step process.

Make sure that you don’t use more than two dots (../) since I’ve seen through multiple trials and errors that it can take a maximum of two dots only. Which also means that the image files you want to display should be accessible within a range of only two sub-folders. (Hope this makes sense!)

So, using the dots before tracking the path to the images is actually very very effective rather then using other ways to display images. It always works well.


Posted

in

by

Tags:

Leave a Reply