Q&A
ファイル／フォルダの構成もスクリーンショットなどで提示してください。
ドットインストールのはじめてのHTMLの#04 imgの回で、Visual Studio Codeで作成したhtmlをデスクトップ上に移動させても、chromeブラウザの更新ボタンを押しても、何故かimg/taro.pngの画像が表示されません。
よく問題とされている事例の違う階層にファイルが存在している種類の問題ではなさそうです。
階層は同じ階層にちゃんと存在しているようです。
使用しているPCはWindows10マシンです。
当方、プログラミングは本日数時間前に始めたばかりの超・超・超・初心者のため、詳しいプログラミング言語等はさっぱりわからず、ドットインストールで勉強し始めたばかりです。
初っ端で見事に挫けそうです。どなたか助けて頂けませんでしょうか？
なお、プリントスクリーンを添付いたします。
申し訳ございません。プリントスクリーンをもう3枚撮影したのですが、最後の1枚しかアップされなかったみたいです。
なんとか提示できるように頑張ります。もう少しお待ちくださいませ。
リンク先をクリックすると、ちゃんと太郎の画像が表示されますが、デスクトップ上に移動したり、chromeブラウザの更新ボタンを押しても画像は表示されません。
1枚ずつ改行して添付されたらと。
編集履歴観ると全部重なってます。
みたいな感じに。（アップされた画像名はteratailのアップローダ側で勝手につけられる名前になります）
丁寧なアドバイス大変助かりました、ありがとうございます！
画像自体はアップできました。
そんなやり方も知らない様な超・超・初心者です。
ブラウザで何か画像やＣＳＳファイル?を読み込ませも、ちゃんと反映されず、文字だけになってしまいます。
ファイアウォールは無効化しましたが、解決できません。
ローカルで開いている以上ファイアウォールは関係ないので有効に戻しておいてください。
ご指摘ありがとうございます。
回答3件
0
ベストアンサー
img/taro.pngという指定をするなら、htmlファイルとpngファイルを同じ場所においても表示されるわけがありません。
同じ場所に置きたいなら
HTML
1<img src="taro.png">
ですし、
HTML
1<img src="img/taro.png">
としたいのであれば、htmlと同じ場所にimgフォルダを置き、その中にpngファイルを置く必要があります。
投稿2019/12/01 01:39
総合スコア2536
アドバイスありがとうございます。
htmlと同じ場所にimgフォルダを置き、その中にｐｎｇファイルが置かれている筈（添付画面の左側のとおり）なのですが、状況が解決されません。
VS Codeの画面では分かりづらいので、エクスプローラで表示できませんか？
おっしゃるとおりであれば、デスクトップにimgフォルダがあるはずですが。
4枚目アップいたしました。imgフォルダ内にアイコンは入っております。
いや、ですから、imgフォルダはデスクトップにないじゃないですか。
htmlファイルはC:\Users\X\Desktop\index.htmlで、ブラウザはC:\Users\X\Desktop\img\taro.pngを探しているのに見つからず、本当はC:\Users\X\Desktop\MyPortfolio\img\taro.pngにあるという状況になっています。
同じファイルであればC:\Users\X\Desktop\MyPortfolio\index.htmlを開けば画像も表示されると思いますよ。
詳しくは相対パスについて勉強されてください。
https://webliker.info/78726/
要するに「開いているHTMLファイル」から見て画像がどこにあるか、という話です。
ありがとうございました！ご指摘のimgフォルダをデスクトップに置くだけで解決しました！
相対パス、絶対パスについていちおうネットで確認はしたのですが、正確に理解できていなかったようです。
丁寧なご返信で本当に助けりました！ありがとうございました！
これで前へ進めます。
super_beginner1さん、できれば２～４枚目の画像を消さずに残してください。
画像を残しておいた方が、Takumibooさんが回答を導くプロセスが、後から質問を見て参考にする人にわかりやすくなります。
0
imgフォルダの中に入っているtaro.pngのoのスペルが小文字になっていないような気がしました。
試しに小文字に修正して頂いても宜しいでしょうか？
投稿2019/12/01 06:47
編集2019/12/01 06:49
総合スコア128
どのスクリーンショットのtaro.pngもすべて小文字のようですが
1枚目画像の「開いているエディタ」に置かれているtaro.pngの小文字と比較して回答しました。
ご指摘通り間違った回答してしまったので削除リクエスト出します。
「開いているエディタ」とどこを比較されたのでしょう…。斜体にはなってますけどね。
0
わからないけど、キャッシュの問題とかではないですか？
あともし
htmlをデスクトップ上に移動させても
というのが、そのまま「htmlファイルだけデスクトップに移動した」
という意味なら、MY PORTFOLIOのフォルダごと動かさないと逆におかしくなります。
あんまりフォルダの場所自体は関係ないと思いますが。
Chrome使っているなら、html開いて「右クリック→検証」、でどんな感じになっているかみてみるのも良いかもしれません。
検証のとこからキャッシュの無効化もできますし。
投稿2019/11/30 22:08
総合スコア331
アドバイスありがとうございます。
ドットインストールの画面講義の通り、画面のプリントスクリーンで、index.htmlのタグだけをマウスでポイントしながら、デスクトップ上に移動しました。
chromeを使っていますが、検証からnetwork→キャッシュの無効化（disablec cache)及び、chromeの設定画面で閲覧履歴データの削除（閲覧履歴、cooki、キャッシュされた画像とデータ）を削除しても解決しておりません。
あなたの回答
tips
プレビュー
