Q&A
この情報だけではなんとも言えません。
記載情報だけでは文法的には問題なさそうですし・・・
もう少しコード全体の情報とあとファイルの階層を記載して下さい。
ネットに上げられている画像ではなく
自分のパソコンに保存されている画像を使用したいです。
この際どうすればいいでしょうか？
画像の名前をpin.jpgに変更し
<img src="pin.jpg">にしていますが画像が表示されません。
以下コードです。
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>こんにちは！</title> <style> </style> </head> <body> <h1>自己紹介</h2> <img src="../img/pin.jpg"></body> </head>
画像の情報は
ファイル名
pin.jpg
場所
C:\Users\panasonic-pc\Downloads
HTMLの置き場所も提示されないとどう書いていいか決まりませんよ。
この情報だけではなんとも言えません。
「置いた場所をHTMLで指定するように」が原則。
相対パスで辿るもよし、自分のPCだけで動くのでよかったら絶対パスで書くもよし。
相対パスがわかりません
分かりませんが分かりません。どう分かりませんか
キーワードとなっているのでGoogle検索で説明記事はわんさかあります。
いずれにしてもHTMLの置き場所も提示されないとどう書いていいか決まりません
相対パス絶対パスの簡単な考え方はマンションやアパートの号室。
「〇〇アパートの205号室」という誰から見ても同じ部屋に行きつくのが絶対パス。
「私の部屋から見て一つ上の階の２つ右側の部屋」というのが相対パスです。
「HTML（自分）」から見てその画像はどこにある というのを指定しなければいけません。
画像を「C:\Users\panasonic-pc\Downloads」から移動なりコピーしてHTMLを作成しているのと同じフォルダに入れれば<img src="pin.jpg">でいいです。
詳しい説明はm.ts10806さんの回答にあります。
回答3件
0
imgタグの記述のあるHTMLから見た相対パスにすると良いです。
今の書き方だとhoge.htmlに書いてあるとしたらpin.jpgは同じ階層に置いてある必要があります。
↓
Dir
1├ hoge.html 2├ pin.jpg
↓もしこうなら
Dir
1├ hoge.html 2├ img - pin.jpg
html
1<img src="./img/pin.jpg">
↓もしこうなら
Dir
1├ fuga - hoge.html 2├ img - pin.jpg
html
1<img src="../img/pin.jpg">
htmlで指定した場所に画像を置く・・のではなく
置いた場所をHTMLで指定するようにすると間違えにくくなります。
※もちろん画像自体がファイル破損してないかどうかは要確認
ローカルPC限定（環境依存になるので非推奨。採用したらダメゼッタイ）
html
1<img src="C:\Users\panasonic-pc\Downloads\pin.jpg">
何度も繰り返します。
置いた場所をHTMLで指定するように
私の回答に書いているのは「こういう風な階層に置いてあったらHTMLでこう書きます」
というだけであり「同じコードでできるよ」ではありません。
自身の環境にあわせて柔軟に対応してください。
置いた場所をHTMLで指定するように
投稿2019/09/06 06:24
編集2019/09/06 06:57総合スコア80850
0
ベストアンサー
すみません、少し自分の書き方も悪かったですね。
なので現状の情報から回答を。
と言ってもm.ts10806さんの回答で解決しそうでもあるので、気になった点と少し補足回答をします。
ご提示頂いてる情報で
html
1<img src="pin.jpg"> 2<img src="../img/pin.jpg">
と異なっていますが、もしかしてファイルの場所が異なっていませんか？
上なら
Dir
1├ htmlファイル 2├ pin.jpg
ですし、下なら
Dir
1├ フォルダ-htmlファイル 2├ img-pin.jpg
になるはずです。
あと考えられるのはご提示情報では問題なさそうですが、コードやファイル名にスペース等が入ってしまっているなどもあり得ます。
一度デベロッパーツールで確認してみると良いかも知れません。
投稿2019/09/06 06:53
編集2019/09/06 06:55総合スコア445
0
ありがとうございます。
教えていただいた方法でやりましたが表示されませんでした。
投稿2019/09/06 06:46
総合スコア14
回答を投稿するのではなく回答にコメントを付けてください。
・コメントをつけたい回答の「コメント投稿」を押下
・テキストエリアにコメントを投稿し「コメントする」ボタン押下
こちらのコメントは誤投稿ということで削除依頼を出しておいてください。
あなたの回答
tips
プレビュー
