質問: コード 言語 html 問題内容 上記に記載しているコードをvsvodeのhtml入力してブラウザを開いても 左上に空のアイコンのようなものが表示されるだけで画像が表示されません 空のようなアイコンというのは、1枚目の写真の左上にあるやつです ### 補足情報 エディタはvacodeです ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/24f9fe6233fd53dc5d575e9c208e63df.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7e7a7270a3c9bc60786418ad44809d2e.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d5f8124a2bd5463ba55a5ec162cbb615.png) ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/91228553e9e67fb6ad3c203bfd91779b.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/6b129d6e76948c65d0df350bc8947736.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7b7a16aa00e9afdb758ab88bce52e69f.png) ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7cb3417d42cc489a485d01087375fa92.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f4c7daf9cfac07e25d3894405bb99e67.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/38114ac6dfe92192ae648fd5d7171d74.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d2a5b86bc65243a49eb9298558afbf86.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c19e5175f507256b986fa45ad9ac4933.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e89f15e11815e25ca4388dad03ccd8c5.png)
回答: 位置関係の提示ありがとうございます。 フォルダ1]と[img]が同じ階層にあり、 [フォルダ1]の中にindex.html [img]の中にaaa.pngがあるという状態であっていますか? その場合はパスの指定が以下になるはずです。 `` 念のため他の場合も示しておきます。 index.htmlと同じ階層にaaa.pngがある `` index.htmlと同じ階層に[img]フォルダがあり、その中にaaa.pngがある ``(または``) 絶対パスと相対パスについてはこの辺りも参考にしてください。 【初心者向け】絶対パスと相対パスの違いをイラストを使って解説! 画像の表示だけでなくハイパーリンクの指定やスタイルシート、JavaScriptの読み込み時などにも使います。 また、今回の問題とは関係がありませんがフォルダ名やファイル名に日本語(マルチバイト文字)を使うことはやめておいた方が無難です。 コレってアリ?ファイル名での日本語(全角文字)利用について こんなHTMLファイル名は嫌だ!知らないと恥ずかしい「名付け」の問題(後編) 以下追記 とりあえず自分の環境で試してみました。 デスクトップ上に[teratail]フォルダを作成 [teratail]フォルダ内に[html]フォルダと[img]フォルダを作成 [html]フォルダ内にindex.html作成 [img]フォルダ内にsampleimg.jpg作成 ![イメージ説明 index.html ``` 山田太郎 初心者 ``` デスクトップ]-[teratail]-[html]-index.htmlをGoogle Chromeで開く F12を押しディベロッパツールで検証 ![イメージ説明 ファイル名やフォルダ名は適宜読み替えていただいて、何かご自身の環境と違うところはありますか?