How Do I Get My Image to Appear on My Webpage?

I found the following question on StackOverflow:

How do I get my image to appear on my webpage?

—StackOverflow

I improved the question into: how do I make images appear on localhost? I do that because I was having that problem, and I could not explain the issue. If that person asks the question in the context of an online/published website, the problem is very easy to solve. This article answers both scenarios.

Understanding your root problem

In a computer, developers can activate localhost anywhere within their file system. They can start their localhost from the Desktop folder if they are on Windows.

We use the following file structure for the working directory:

my-project/
├─ images/
│  ├─ panda.png
├─ index.html

As an example, I can activate a localhost with the following steps:

1. I start a localhost from the Desktop.
2. I access localhost:5000 in my browser.
3. I open the my-project folder, which results in http://localhost:5000/my-project.

The problem with starting a localhost in the Desktop folder is that if the src attribute for the img element is /images/panda.png, the image will not show up because the root folder is the Desktop folder. There is no images folder with a panda image inside the Desktop folder. If you move the images folder to the Desktop folder, the panda will show up.

When you refer to a file with a relative file path, the root can be anything. In this case, the root folder is the Desktop folder. The root means the / or the http://localhost:5000/. If you activate localhost in the Desktop folder, the http://localhost:5000/ refers to Desktop as the root folder.

Solving the issue

To fix the problem, activate the localhost inside the my-project folder or change the file path to ./images/panda.png.

If you have published your website and the image still does not show up, make sure you use a relative file path such as /images/panda.png or ./images/panda.png. Do not include Desktop inside the src attribute.

Getting to know other potential issues

If the problem persists, consider the following:

• Check the file path. Make sure there is no typo.
• Make sure the file exists—no problem, my friend.
• Probably the program that runs your localhost has a bug.
• Your browser extension disables images.
• Your browser is the problem.
• Add more details to your question so that we can help you.
• Remember that other people can not read your mind and do not know your exact environment.