画像が表示されなくて困っています。

Question

VScodeにてpreviewを表示しながらコードを書いています。
下記のイメージの通り、画像が表示されなくて困っています。
ネットで画像が表示されない原因について調べて、破損していないか・容量がいっぱいでないか・ウィルススキャンではじかれていないか、自分でできることはしたつもりです。
もう4時間ほど止まってしまっています。
すみませんが、どなたか何が原因か見ていただけないでしょうか？
よろしくお願いします。

Comments

[bebebe_]

他のブラウザで開くと表示されますか？

[JunJun0829]

googleにスライドすると表示されます。

[technocore]

Previewにはどんな機能拡張使ってます？

[JunJun0829]

どこで見ることができますか？

[technocore]

自分でインストールしたのでは？

[JunJun0829]

サイトを見ながらやったので、実はあまり理解できていません。汗
使っているのはVS CodeというツールでLive HTML PreviewとHTML Previewというのをインストールしました。

[JunJun0829]

↑質問に対しての回答になってなかったらごめんなさい。

Answer 1

＞Live HTML PreviewとHTML Previewというのをインストールしました。

似たような拡張機能を入れていますので、どちらか一方にしてみては？
または画像が壊れている可能性はないですか？
本当に画像はPNGですか？
私のVSCodeにHTML Previewだけを入れてみましたが、問題なく画像も表示できました。

Comments

[JunJun0829]

ありがとうございます。片方消してもだめで、「01.png」を「1.png」に変更したら（画像ファイル、コード共に）表示されました。変更したキッカケが貼られた画像だったので大変助かりました。

Answer 2

「サイト模写」というフォルダーで作業されていますが、
日本語はやめて、半角英数字のフォルダー名に変更してみてください。

その拡張機能が、日本語のパスに対応していない可能性があります。

Comments

[JunJun0829]

早速site copyに変更したのですが、解決されませんでした..。

[technocore]

＞早速site copyに変更
では、途中に空白を入れないでください。

[JunJun0829]

空白を削除して再度読み込みましたが、ダメでした。