常連

VScodeの拡張機能であるlive serverについての質問です。

このlive serverを通して表示させようとすると、テキスト等は表示されるのですが、画像に関してが全く表示されません(相対パスでも絶対パスでも)。
通常通りlive serverを介さずに、ファイルを読み込ませる形を取れば、テキストはもちろん、画像等の全てが完璧に表示されます。

エラーコードはFailed to load resource: the server responded with a status of 404 (Not Found)です。

```
コード

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cresta Design</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700|Noto+Serif:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./responsive.css">
    <link rel="stylesheet" href="slick/slick.css">
    <link rel="stylesheet" href="slick/slick-theme.css">
  </head>
  <body>
    
    <header>
      <div class="header-inner">
        <h1 class="site-title"><a href="#">Cresta Design</a></h1>
        <nav class="header-nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="#">Concept</a></li>
            <li class="nav-item"><a href="#">Service</a></li>
            <li class="nav-item"><a href="#">Works</a></li>
            <li class="nav-item"><a href="./contact.html">Contact</a></li>
          </ul>
        </nav>
        <button class="burger-btn">
          <span class="bar bar_top"></span>
          <span class="bar bar_mid"></span>
          <span class="bar bar_bottom"></span>
        </button>
      </div>
    </header>
    

    
    <main>
      <div class="fv">
        <ul class="slider">
          <li><img src="../img/fv-bgi_01@2x.jpg"></li>
          <li><img src="../img/fv-bgi_02@2x.jpg"></li>
          <li><img src="../img/fv-bgi_03@2x.jpg"></li>
        </ul>
        <div class="main-copy">
          <p class="en-copy">Design for Smaile.</p>
          <p class="jp-copy">快適なオフィスを<br class="sp-br">デザインする</p>
        </div>
      </div>
      <section class="section-wrapper">
        <h2 class="section-title">concept</h2>
        <div class="section-inner">
          <p class="concept-lead">
            働きたくなる空間をデザインすることで<br class="pc-br">
            人々を幸せにする。
          </p>
          <div class="concept-content">
            <p class="concept-text">
              aaaaaaaaaa aaaaaaaaa aaaaaa aaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaa
              aaaaaaaa aaaaaaaa aaaaaa aaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaa
              aaaaaa
            </p>
            <div class="concept-img-wrapper">
              <img src="../img/concept-image@2x.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="section-bottom text-right">Our Concept</div>
      </section>
      <section class="section-wrapper bg-works">
        <h2 class="section-title text-right text-white">Works</h2>
        <ul class="works-list">
          <li class="works-item">
            <a href="#">
              <div class="works-list-img"><img src="../img/card-img01@2x.jpg"></div>
              <p class="works-list-text">bbbb bb bbbb bbbbb bbbbbbb bbbb bbbb bbbb b</p>
            </a>
          </li>
          <li class="works-item">
            <a href="#">
              <div class="works-list-img"><img src="../img/card-img02@2x.jpg"></div>
              <p class="works-list-text">bbbb bb bbbb bbbbb bbbbbbb bbbb bbbb bbbb b</p>
            </a>
          </li>
          <li class="works-item">
            <a href="#">
              <div class="works-list-img"><img src="../img/card-img03@2x.jpg"></div>
              <p class="works-list-text">bbbb bb bbbb bbbbb bbbbbbb bbbb bbbb bbbb b</p>
            </a>
          </li>
        </ul>
        <a href="#" class="link-btn text-white">View more</a>
        <div class="section-bottom text-white">Our Works</div>
      </section>
      <section class="section-wrapper">
        <h2 class="section-title">Service</h2>
        <ul class="service-list">
          <li class="service-item service1"><a href="#">Hearing</a></li>
          <li class="service-item service2"><a href="#">Playing</a></li>
          <li class="service-item service3"><a href="#">Derecing</a></li>
        </ul>
        <div class="section-bottom text-right">Our Service</div>
      </section>
      <section class="section-wrapper bg-contact">
        <h2 class="section-title  text-right text-white">Contact</h2>
        <div class="section-inner">
          <p class="contact-text">お気軽にご相談ください</p>
          <a href="./contact.html" class="link-btn">Contact</a>
        </div>
        <div class="section-bottom text-white">Contact us</div>
      </section>
    </main>
    
    <footer class="footer">
      <small>&copy;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</small>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="slick/slick.min.js"></script>
    <script src="./script.js"></script>
  </body>
</html>


```

ご回答いただければ、幸いです。

	@@ -1,1 +1,1 @@
1	- live serverについて
1	+ live serverで画像のみ表示されない

質問編集履歴