LoginSignup
@sakumacoco

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

VScodeのLive previewで表示できない（Googleではサイトが表示出来る）

Q&A

VSCodeLivePreview

解決したいこと

VScodeでLive Previewを使っているものの、
画像が読み込めない表示になります。
Googleでは普通に表示されているのですが、
Live previewでは何度表示させても画像が読み込めません。

どうすればLive Previewでも
正しく表示されるのかが知りたいです。

//qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070687/54231d48-bdad-b757-8218-abbe5cc48890.png)
![213.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070687/c58d6751-aa8c-3d84-f90f-674c11eacbec.png)


### 自分で試したこと
VScodeのLive　previewについてググってはみましたが、
当てはまる情報がなく、どう解決していいのかわかりませんでした。
0 likes

2Answer

Verclene
@Verclene

URL欄の表示にあるようにLive Previewでは簡易的にサーバを立ち上げてファイルの内容を表示しますが,このサーバはワークスペース外のファイルを公開しません.

ブラウザでローカルにある画像を表示できるのは,ローカルのHTMLファイルを直接開いているからですが,このローカルファイルへのアクセスもものによっては制限されるものがあり,その他諸々の都合でWeb開発では簡易的にでもWebサーバを構築したうえでレビューするのが通例になっています.

Live Preview等の簡易サーバがローカルディスク内のファイルを全公開できるようにするなんて危ないことをするわけにはいかないので,大人しくVSCodeで開いているフォルダー内に該当の画像をコピーして,相対パス指定することを推奨します.

1Like

Comments

  1. @sakumacoco

    Questioner

    お返事遅くなって申し訳ありません。
    相対パス指定してpreviewすることができました、
    回答いただきましてありがとうございます！

Your answer might help someone💌

LoginSign Up