I have a problem using Live Server in VS Code. When I use a navigation bar's logo in the HTML code, it works fine when I open the file without using Live Server. But when I try to open it using Live Server, it doesn't show up.

Why don't images show up in VS Code Live Server?

I have a problem with Live Server in VS Code.

When I use the logo on the navigation bar in my HTML code, it works fine when opening the file without using Live Server. But when I try to open it using Live Server, it doesn't show up. .

This is my HTML code

<!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" />
    <title>World Web</title>
    <link rel="stylesheet" href="css/style.css" />
    <!--Boostrap Linked-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!--Nav Bar section Start-->
    <div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark container">
      <a class="navbar-brand" href="">
        <img src="../World Web/img/Brand/dark logo.svg" alt="logo" width="120" height="60">
      </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Download</a>
            </li>
            
            
          </ul>

        </div>
    </nav>
  </div>
    <!--Nav Bar section End-->

    <!--Hero section Start-->

    <!--Hero section End-->

    <!--AboutUs section Start-->

    <!--About us section End-->

    <!--Footer section Start-->

    <!--Footer section End-->

    <!--Java Script-->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

This is the output when opened in Chrome without using Live Server.
This is the output when opened using Live Server.

When using Live Server to open a file, the logo in my navigation bar cannot be previewed. However, when I open the file without using Live Server, it works fine.

P粉710454910499 days ago502

Why don't images show up in VS Code Live Server?

reply all(1)I'll reply