Question 136061 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – The links are working fine in VS Code but when I open from folder, the links stop working

I made a website for our project in HTML and the HTML links are working fine in VSCode. However, when I open the HTML file for the main page in the folder itself (not from the live preview from VSCode), the links stop working and show this error:
enter image description here

This is a snippet of the codes that I’m using:

    <header id="top">  
    <video autoplay loop muted plays-inline class="back-video">
        <source src="bg vid 2.mp4" type="video/mp4">
    </video>
    <div style="padding: 10%;">
    <div style="text-align: center;">
    <img class="logo" src="Logo Transparent.png"/>
    </div>
    <h1 class="title">Chingu K-Pop Merch</h1>   
    <nav style="text-align: center;">
        <a class="button" href="index.html"><i class="fa-solid fa-house"></i> Main Page</a>
        <div class="products-dropdown">
            <button class="button" type="button"><i class="fa-solid fa-box"></i> Products</button>
            <div class ="products-content">
                <a href="All Products.html">All Products</a>
                <a href="/Boy Groups/Kpop_Boy_Group.html">All Boy Groups</a>
                <a href="/Girl Groups/Kpop_Girl_Group.html">All Girl Groups</a>
                <a href="/Soloists/SOLOISTS.html">All Solo Artists</a>
                <div style="height: 20px; background-color: white; color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Boy Groups/svt/Seventeen_Kpop_Boy_Group.html">SEVENTEEN</a>
                <a href="/Boy Groups/bts/BTS_Kpop_Boy_Group.html">BTS</a>
                <a href="/Boy Groups/exo/exo.html">EXO</a>
                <div style="height: 20px; background-color: white;color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Girl Groups/ITZY and BP/ITZY.html">ITZY</a>
                <a href="/Girl Groups/ITZY and BP/BLACKPINK.html">BLACKPINK</a>
                <a href="/Girl Groups/twice/twice.html">TWICE</a>
                <div style="height: 20px; background-color: white;color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Soloists/IU.html">IU</a> 
                <a href="/Soloists/CHUNGHA.html">CHUNGHA</a>
            </div>
        </div>
        <a class="button" href="/About The Developers Page HTML/Developers_AboutUs.html"><i class="fa-solid fa-address-card"></i> About Us</a>
        <a class="button" href="/Contact Us Page HTML/Contact_Us.html"><i class="fa-solid fa-phone"></i> Contact Us</a>
    </nav>
    </div>
</header>
Tags:

2

Answers


  1. 0

    I think you are using the links to local files in your pc

    Therefore, once you are running the html in the local server it stops working

    Please share your code, so the problem can be identified, otherwise, your problem is not clear

    Login or Signup to reply.
  2. 0

    The problem is with the leading / you have in your link’s href

    Suppose you have a folder structure like this

    enter image description here

    and you are having an anchor tag like this.

    <a href="/pages/about.html">About Page</a>

    Serving from VS Code (Live Server)

    Index Page URL: http://127.0.0.1:5500/index.html
    When you click on the /pages/about.html link it gets navigated to http://127.0.0.1:5500/pages/about.html

    Opening using File System

    Index Page URL: file:///C:/Users/navee/Desktop/sample-app/index.html
    On clicking about us will get navigated to file:///C:/pages/about.html

    The problem is that you are using /(absolute path). You can solve this by adding a relative path like ./ or ../

    Check this: Why would a developer place a forward slash at the start of each relative path?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search