Q&A
>VScodeの拡張機能である
でしたら、今ついているタグどれもフォローできる内容ではないので、タグは「Visual Studio Code」をつけられたほうが良いかと思います。
https://teratail.com/tags/Visual+Studio+Code
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 --> <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> <!-- header --> <!-- main --> <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> <!-- main --> <footer class="footer"> <small>©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件
0
ベストアンサー
画像だからではなく、.. を使っていて、VSCode で開いているフォルダの外側にあるからだと思います。
例えば、以下のようなフォルダ構造で html フォルダを開いた場合、live server では html フォルダがドキュメントルートとなり、http://127.0.0.1:5500/index.html という URL でアクセスされるため、html フォルダの外側にあるファイルにはアクセスできません。
img フォルダにもアクセスしたい場合は、VSCode で project フォルダを開けば index.html ファイルは http://127.0.0.1:5500/html/index.html という URL でアクセスされるため、<img src="../img/image.jpg"> で image.jpg を表示することができます。
project ├── html │ └── index.html └── img └── image.jpg
投稿2020/04/03 18:30
総合スコア7901
あなたの回答
tips
プレビュー
