Q&A
aaa.png のある場所の問題だと思います。
index.html のあるフォルダに img フォルダを作って、その中に入れてますか？
コード
<img src="img/aaa.png">
言語
html
問題内容
上記に記載しているコードをvsvodeのhtml入力してブラウザを開いても
左上に空のアイコンのようなものが表示されるだけで画像が表示されません
空のようなアイコンというのは、1枚目の写真の左上にあるやつです
補足情報
エディタはvacodeです
htmlファイルと画像ファイルの位置関係がわかるようなスクリーンショット等を提示してください。
3枚目の写真にフォルダの位置関係のスクリーンショット追加しました！
回答4件
0
ベストアンサー
位置関係の提示ありがとうございます。
[フォルダ1]と[img]が同じ階層にあり、
[フォルダ1]の中にindex.html
[img]の中にaaa.pngがあるという状態であっていますか？
その場合はパスの指定が以下になるはずです。
<img src="../img/aaa.png">
念のため他の場合も示しておきます。
index.htmlと同じ階層にaaa.pngがある
<img src="img/aaa.png">
index.htmlと同じ階層に[img]フォルダがあり、その中にaaa.pngがある
<img src="img/aaa.png">(または<img src="./img/aaa.png">)
絶対パスと相対パスについてはこの辺りも参考にしてください。
【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
画像の表示だけでなくハイパーリンクの指定やスタイルシート、JavaScriptの読み込み時などにも使います。
また、今回の問題とは関係がありませんがフォルダ名やファイル名に日本語（マルチバイト文字）を使うことはやめておいた方が無難です。
コレってアリ？ファイル名での日本語（全角文字）利用について
こんなHTMLファイル名は嫌だ！知らないと恥ずかしい「名付け」の問題（後編）
以下追記
とりあえず自分の環境で試してみました。
デスクトップ上に[teratail]フォルダを作成
[teratail]フォルダ内に[html]フォルダと[img]フォルダを作成
[html]フォルダ内にindex.html作成
[img]フォルダ内にsampleimg.jpg作成
index.html
html
1<img src="../img/sampleimg.jpg"> 2<h1>山田太郎</h1> 3<p>初心者</p> 4<!-- <html>や<body>は省略 -->
[デスクトップ]-[teratail]-[html]-index.htmlをGoogle Chromeで開く
F12を押しディベロッパツールで検証
ファイル名やフォルダ名は適宜読み替えていただいて、何かご自身の環境と違うところはありますか？
投稿2020/06/04 05:08
編集2020/06/04 12:09総合スコア3235
ご丁寧にありがとうございます
<img src="../img/aaa.png">のコードを使用したところ、
4枚目の写真にあるリンク先を表示をクリックするとvscode内では,画像が表示されるようになったのですが
（以前までは5枚目の写真のようになっていました）
新しくブラウザを開いても1枚目の写真と同様になってしまいます
何か他に問題があるのでしょうか？
一応6枚目の写真に、リンク先をクリックし、実際に開けた画像も表示しておきます
編集したファイルとブラウザで開いて確認しているファイルは同じものですか？
画像以外の更新は反映されますか？
キャッシュの削除もしてみてください。
試してみましたがダメでした
疑問点として、何故か7枚目の写真の山田太郎の上に山と雲のアイコンのような画像が表示されます
これをクリックすると、8枚目写真の画像を読み込むをクリックしても反応なし、新しいタブで画像を開くをクリックすると9枚目の写真の状態になってしまいます
やはり開いているファイルが違うのでは？名称未設定フォルダ-フォルダ1内のindex.htmlを開いてますか？
開いています
関係あるかわからないですが、ブラウザ名？のところが自分の名前になっています
新しく上げた画像の黒く塗り潰しているところが、自分の名前のところです
あ、すみませんこちらデスクトップのフォルダの場所を変更してあるのでユーザー名になってるのは問題ないです。
はじめに提示していただいたスクリーンショットだと名称未設定フォルダとかフォルダ1とかあるのですが、ブラウザのスクリーンショットだとデスクトップに直接index.htmlがあるように見えます。
そのため編集しているものとブラウザで見ているファイルが違うのではないかと思っているのですが…。
どちらにしろ、回答にも記載した通り「画像を表示させるためのHTML」と「表示させたい画像ファイル」の関係を確認し、それに合わせてパスの記述を書いてください、ということしか言えないですね…。
すみません、ありがとうございます解決いたしました！
毎回出来上がったindex.htmlを新しく上げた画像のようにドラッグ&ドロップして、デスクトップ上に置いて、そこから開いていたのですが、デスクトップ上にある名称未設定フォルダから、index.htmlを開いたところ何故だか分かりませんが、画像の表示に成功しました！
0
<img src="img/aaa.png">
上記コードは、フォルダやファイルの構造が以下の画像のようなときだけ有効です。
index.htmlとaaa.pngが同じフォルダ内にある場合は以下のようにしてください。
<img src="aaa.png">
そのほかだと以下が思いつきます。心当たりがあれば確かめてみてください。
- ファイル名やフォルダ名に、全角文字 (全角スペースを含む) が存在してしまっている
- ファイルに読み込み権限がない
- htmlファイルが複数あり、エディタで表示しているファイルではない箇所のファイルをブラウザで表示してしまっている
投稿2020/06/03 20:58
編集2020/06/03 21:01
総合スコア4528
0
質問がなにかよーわかりませんが、
とりあえずこれをどうぞ
投稿2020/06/03 14:19
総合スコア88042
0
まずは、原因部分を切り分けて探る必要があると思います。
html
1 2<img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f1cb4c389b22dd974b54e4f7deff1aa6.png">
上記のような、画像の場所を絶対パスで表したタグで表示できますでしょうか。（上記の画像リンクは質問者さんの画像です。）
もし表示されれば、画像ファイルのファイル配置か、画像ファイル自体に問題があると思われます。
表示できなければ、ネットワークやブラウザ等の環境に問題があると思います。
投稿2020/06/03 14:47
編集2020/06/04 01:46
総合スコア130
あなたの回答
tips
プレビュー
