suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum werden im VS Code Live Server keine Bilder angezeigt?

Ich habe ein Problem mit Live Server in VS Code.

Wenn ich das Logo in der Navigationsleiste in meinem HTML-Code verwende, funktioniert es einwandfrei, wenn ich die Datei ohne Verwendung von Live Server öffne. Aber wenn ich versuche, es mit Live Server zu öffnen, wird es nicht angezeigt. .

  1. Das ist mein 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>
  1. Dies ist die Ausgabe beim Öffnen in Chrome ohne Verwendung von Live Server.

  2. Dies ist die Ausgabe beim Öffnen mit Live Server.

Beim Öffnen einer Datei mit Live Server kann das Logo in meiner Navigationsleiste nicht in der Vorschau angezeigt werden. Wenn ich die Datei jedoch ohne Verwendung von Live Server öffne, funktioniert es einwandfrei.

P粉710454910P粉710454910539 Tage vor563

Antworte allen(1)Ich werde antworten

  • P粉238433862

    P粉2384338622023-07-20 12:56:40

    在文件名或文件夹之间不要使用任何空格。

    <img src="../World Web/img/Brand/dark logo.svg" alt="logo" width="120" height="60">

    要么使用dark_logo.svg,要么使用dark-logo.svg,World Web也是一样。

    Antwort
    0
  • StornierenAntwort