How To Add Images From The System In HTML

Ammar Habib (HTML, CSS)

1 year ago

A few days ago, I received an interesting question on my Instagram: How To Add Images From The System In HTML, It’s a common question that many beginners face when they start learning HTML. So, let me walk you through an incorrect approach and then guide you towards the right solution.

The Wrong Code (Common Mistake)

Many beginners might try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding an Image</title>
</head>
<body>
    <img src="C:/Users/YourName/Pictures/image.jpg" alt="My Image">
</body>
</html>

Why This Code is Wrong:

The mistake here is trying to directly link to an image on your local computer using a file path like C:/Users/YourName/Pictures/image.jpg.
While this path might work on your computer, it won’t work for anyone else who visits the webpage because their browser won’t have access to files stored on your machine.

Correct Solution: Using Proper File Paths

To properly display images on an HTML page, the image must be uploaded to the same directory (or a subdirectory) as your HTML file or hosted online. Here’s the correct way to do it.

Correct Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding an Image</title>
</head>
<body>
    <img src="images/myimage.jpg" alt="My Image">
</body>
</html>

Why This Code Works:

In this correct example, I’ve assumed that you’ve placed the image inside a folder called images within the same directory as your HTML file.
The src="images/myimage.jpg" points to the relative path of the image file, which will work as long as the image is correctly uploaded on the server or in the same folder as the HTML file.
You can also use a hosted image link, like src="https://example.com/myimage.jpg", if your image is uploaded to a cloud or external server.

Conclusion

When adding images to an HTML page, always ensure that the image is stored in a location accessible by the browser. Don’t use the local file path from your computer because it won’t work for others accessing your site.

Instead, place your images in the same directory as your HTML file or in a subfolder (like images) and use relative paths to link to them. You can also host your images online and link directly to them using their URL.

If you’ve got more questions like this, feel free to drop them on my Instagram! I’m always happy to help beginners learn the basics of web development.