Why local images/links don't work on HTML on VS Code?

Question

I'm currently having problems with linking things on VS Code. I created a folder for a project and put all files really organized inside, linked everything right and still get nothing. Folder with all the files

The code is this one:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
    <script src="/assets/scripts/card-hover-animation.js"></script>
    <title>Spider-Man | Multiverse</title>
</head>

<body>
    <nav class="s-menu">
        <ul>
            <li class="s-menu__item">
                <a href="/">Homepage</a>
            </li>
            <li class="s-menu__item">
                <a href="#">Tobey Maguire</a>
            </li>
            <li class="s-menu__item s-menu__icon">
                <img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
            </li>
            <li class="s-menu__item">
                <a href="#">Tom Holland</a>
            </li>
            <li class="s-menu__item">
                <a href="#">Andrew Garfield</a>
            </li>
        </ul>
    </nav>

And the CSS is huge but a preview is This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this..

I've also tried extremely simple codes like this HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/test/style.css">
    <title>Document</title>
</head>
<body>
    <h1>H1</h1>
    <p>Lorem ipsum</p>
</body>
</html>

with this CSS:

h1 {
    font-style: italic;
    color: violet;
    text-align: center;
}

p {
    color: gray;
    font-stretch: expanded;
}

And if I link it as a style.css file, I get no stylization. And the problem is not with CSS because if I put like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
    font-style: italic;
    color: violet;
    text-align: center;
}

p {
    color: gray;
    font-stretch: expanded;
}
    </style>
    <title>Document</title>
</head>
<body>
    <h1>H1</h1>
    <p>Lorem ipsum</p>
</body>
</html>

It works perfectly. AND if I link an external link like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>H1</h1>
    <p>Lorem ipsum</p>
    <img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>

It also works. (the external link, the internal still nothing).

I've looked for this problem everywhere but didn't find a solution and tried some answers like this one, this one and adding the dot before the direction (like ./folder/file.css instead of /folder/file.css) and I even reinstalled VS Code but it didn't work :(

Please help!

if you use root links `"/assets/..."` you need to use a webserver, for dev you can use the Python SimpleHttpServer — rioV8, May 12 '22 at 19:38
Thank you! That really helped, after I installed the extension the "../assets..." worked! — Bruna Letti, May 12 '22 at 22:48

Chizaram Igolo · Accepted Answer · 2022-05-12T19:59:03.507

Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./, like this:

<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">

If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../ as many times as needed depending on how deep the folder goes like this:

<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">

But the first approach is the more understandable one.

In the same manner, the link and script files should be referenced this way:

<link rel="stylesheet" href="./css/home-page-styles.css"> 
<script src="./scripts/card-hover-animation.js"></script>

As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:

<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>

score 0 · Answer 2 · answered May 12 '22 at 19:49

As this answer states you must use ../ before picking any images and on vs code you don't need to write the whole file name just use ../ and it will show you all folder and file in that particular folder. you just need to pick it.

or the simple solution to this problem is that just copy the image in the same folder as the main html file is and just write the image name vs code will identify it, just pick it from there.

<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">

</li>

score 0 · Answer 3 · answered May 12 '22 at 20:16

0

According to your shared screenshot i assume your index.html is in the same directory like your images folder. Then this will work localy.

<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">

answered May 12 '22 at 20:16

Yalcin Kilic

778
3
14

Why local images/links don't work on HTML on VS Code?

3 Answers3