Q&A
質問は編集できます。質問テンプレート文言は削除し、
項目はなるべく埋めてください。
他者には書いてあることが全てなので、本当に必要な情報なのか、テンプレート文言が残っているだけなのか、 完全には判断できません。
前提・実現したいこと
lang
1<img src="img/taro.png" width="120" height="120" alt="太郎のアイコンです"> 2<h1>山田太郎です。</h1> 3<p>webデザイナー見習いです。</p>
vscodeで画像を表示させたい
vscodeでimgタグを使い画像を表示させたいのですがブラウザだとうまく表示されません
環境はMACos10.15.2です
解決策はありますでしょうか？
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
使う画像を変えてみたり一度画像ファイルを削除し再インストールして再度試しました
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
すみません、教えていただきありがとうございます
コードは「テンプレート」部分に入れてください。
マークダウンのcode機能ですね。
https://teratail.com/help#about-markdown
ありがとうございます
こちらであってましたか？
はい。コード部分はオーケーです。
で、
＞再インストールして
これはなにを再インストールしたのでしょうか？
見ている側はあくまで赤の他人なので、目的語や主語が抜けるとなんのことを言っているのかわからなくなります。
あと本件とは直接関係ないのですが、
html,head,bodyといったフレーム部分を担当するタグが全くないのもHTML構造としてはNGかと思います。
VSCode利用者ではないので詳しくはないのですが、最小構成のテンプレートなどは用意されてないのでしょうか？
失礼しました、再インストールは画像のデータです。
こちらはドットインストールの学習の最初の講座になります
html,head,bodyはこれから書くのですがいきなり躓いていました。
ちょうど今他の方に教えていただき解決しました
長々と愚問にお付き合いいただきありがとうございました
またよろしくお願い致します
画像は「インストール」ではなく「設置」としたほうが表現としては正しいです。
>html,head,bodyはこれから書くのですが
それは家の建設で言うと基礎を用意せず部屋を設置していっているようなものなので、必ず先に置いてください。
ただ、「なぜはじめからドットインストールに聞かなかったんだろう」「なぜ私の回答がベストアンサーなのだろう」という疑問は残ります。
回答3件
0
ベストアンサー
index.htmlからだとその画像は
./basic_html_v5/MyPortfolio/img/taro.pngのようになると思います。
※画像見て手打ちしたので間違ってる可能性もあります。自身で確認してください。
つまり画像だと手打ちするしかないのでできればテキストで提示していただきたいですね
投稿2020/02/02 21:40
総合スコア80875
ありがとうございます。
以下のimg/taro.pngの部分を./basic_html_v5/MyPortfolio/img/taro.pngに変えてみましたが変化なしでした
「見た限り」です。”のようになる”と回答しています。
伝えたいのは「HTMLファイルから見た正しい相対パスにしてください」なので。
ブラウザ開発ツールのコンソールに404 Not Found のようなエラーが出ていれば「パスが間違っている」ということになります。
>パスとは
調べましょう。知っておかないとHTML、CSS、JavaScriptは進みません。
https://wa3.i-3-i.info/word1166.html
あと「相対パス」「絶対パス」についても調べておいてください。
あなたの回答
tips
プレビュー
