Troubleshooting an HTML image not loading

I had a friend reach out recently about some trouble with an image not loading from their code. They were going through an introductory course in development and remembered that I had got into coding a little while back, so they decided to reach out to me for help. I gladly hopped on a call and had them walk me through what they were looking to do.

The problem

Essentially they needed to load an image that was in an image folder alongside their index.html file.

They showed me what the page looked like when loaded in the browser, and all we saw was three small image icons (showing that the images weren't loading). They also said that the images weren't properly centered on the page.

Initial troubleshooting

I told them we were only going to focus on the image not loading, then we would look into the actual centering of the images.

My mind immediately went to thinking that the image tags weren't pointing to the files correctly when I saw the placeholder icons.

So I had them open the HTML file to see if we could figure out what the problem might have been.

Their index.html code looked something along the lines of

<img src="images/image-1.png" />
<img src="images/image-2.png" />
<img src="images/image-3.png" />

Instead of trying to have them open their browser console to see the error message (since I wasn't sure if they had progressed that far yet), I had them talk me through how they were trying to get the image to display on the screen.

Talking through the issue

They said they had image tags in their HTML that were pointing to files in an image folder in their directory. The <img> tags didn't seem to have any problems in terms of the src attribute, so I had them show me where the index file and image folder were located.

Their directory structure looked like the following (along with some other files):

index.html
style.css
img/
  image-1.png
  image-2.png
  image-3.png

I then asked them if they noticed any differences in their file or folder names compared to what they had in the src attribute in their image tags.

The "Aha!" moment

They immediately noticed the difference in "images" vs "img" for the folder name. The "Aha" popped out of their mouth and they updated their file references to src="img/image-1.png" and so on. They loaded the page again and all was working properly!

We then took a look at centering the images and noticed they had some incorrect CSS that was causing it not to work. They were able to fix that fairly quickly with a little guidance.

Taking a step back as a senior developer

Now, this was a perfect example of me having to step out of my shoes for a second and remember how difficult it was trying to piece things together when I first started development.

This is something I think senior devs take for granted sometimes when helping more junior developers. We've been troubleshooting for years and understand that you need to break coding problems down into individual steps.

In this example:

Step 1: Figure out why the images aren't loading

Step 2: Apply the solution and have the images load on the screen

Step 3: Look into why the images aren't centered

Step 4: Apply the solution for centering the image

I think this was a great lesson in remembering that what may seem somewhat simple to you was not so simple when you first started development. It's easy to miss an opening/closing tag, or a semi-colon here or there when you don't fully comprehend everything that's going on when you're first learning.

• What's HTML markup?
• How do I style this HTML markup?
• Where do I import the CSS file?
• What attributes are needed for this tag vs that tag...

The list goes on and on even when it's just for a very simple adjustment to your code.

As a junior developer, you're trying to remember all of these things while also trying to figure out how to properly add images to an HTML file and also troubleshoot it not working.

Remembering where you came from

These are the moments that make you realize how far you've come as a developer, but also how important it is to be thoughtful and helpful as a mentor to those that are more junior to you. Not a day goes by where I'm not thankful for the mentors I've had in my past while learning to program and I will always pay it back wherever I can.

Keep it up, new developers!

To the newer developers out there, keep it up! I know it's extremely frustrating at times and you feel like you should know the answers, but it just takes time, persistence, and patience. You will get better, and never be afraid to ask for help! Most developers are willing to help because we have been in your shoes before.