简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
为什么图片在 VS Code Live Server 中没有显示出来？
P粉710454910
P粉710454910 2023-07-19 15:47:02
0
1
471

我在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粉710454910
P粉710454910

全部回复(1)
P粉238433862
P粉2384338622023-07-20 12:56:40 1 楼

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

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

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

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！