How to reference images within an HTML file (when running on a local host)

equanimity 0
Viewed 26

My goal is to create an HTML file that renders an image. I'd like to zip the project and share it with someone, who would then run it on their local machine.

Let's assume that I have an index.html file that references an image named infographic.png. This infographic.png file is saved in an assets folder.

My file structure is:

C://Users/name/Desktop/projects/project_2/index.html
C://Users/name/Desktop/projects/project_2/assets/infographic.png

When I use JetBrains Webstorm to inspect the webpage, I see that the infographic.png file renders as expected. However, when I navigate to the index.html file on my machine via Windows Explorer and double-click the index.html file, I see that the infographic.png is not rendering (only the alt text is rendering).

Originally, my code was:

<img src="./assets/infographic.png" alt="Infographic of Salary Data">

(notice the single dot in the path)

Then, I changed it to a double dot (..) in the file path:

<img src="../assets/infographic.png" alt="Infographic of Salary Data">

And, that seems to have resolved the issue. The image renders as expected.

Question: Is the double dot (..) the right way to reference this file? Is there another way?

Thanks in advance for your help!

enter image description here

UPDATE:

The index.html file looks as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
          crossorigin="anonymous">

    <title>Example</title>
</head>
<body>

<h1 id="Example">Example</h1>

<hr>

<div class="container">
    <div id="title" class="row">
        <h4>Example</h4>
    </div>

    <div class="row">
        <div class="col-6 justify-content-center">
            <img src="./assets/infographic.png" alt="Infographic of Salary Data">
        </div>
        <div id="analysis" class="col-6">
            <h4>Analysis</h4>

            <p>this is some text commentary...</b>
        </div>
    </div>
</div>

</body>
</html>
html
1 Answers
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.

The other way you can reference the file is with the absolute path. Google relative versus absolute path. I'm sure W3 has a tutorial. If you are wondering why people are trying to close this question it's because a simple google or stackoverflow search would reveal the answer. The more you help yourself the more other people will help you.

DCR0
Related