搜尋

首頁  >  問答  >  主體

為什麼圖片在 VS Code Live Server 中沒有顯示出來?

我在VS Code中遇到了Live Server的問題。

當我在我的HTML程式碼中使用導覽列上的Logo時,在沒有使用Live Server的情況下開啟該檔案時,它能正常運作。但是當我嘗試使用Live Server打開它時,它不會顯示。 .

  1. 這是我的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" />
    <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. 這是在沒有使用Live Server的情況下在Chrome中開啟時的輸出結果。

  2. 這是使用Live Server開啟時的輸出結果。

在使用Live Server開啟檔案時,我的導覽列中的Logo無法預覽。但是,當我在沒有使用Live Server的情況下開啟該檔案時,它可以正常運作。

P粉710454910P粉710454910499 天前503

全部回覆(1)我來回復

  • 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也是一樣。

    #

    回覆
    0
  • 取消回覆