質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2291閲覧

【vscodeで画像を表示させたいのですがうまく表示できません】

d51

総合スコア6

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/02/02 21:35

編集2020/02/03 00:09

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/02/02 21:43

質問は編集できます。質問テンプレート文言は削除し、 項目はなるべく埋めてください。 他者には書いてあることが全てなので、本当に必要な情報なのか、テンプレート文言が残っているだけなのか、 完全には判断できません。
d51

2020/02/02 21:52

すみません、教えていただきありがとうございます
d51

2020/02/03 00:10

ありがとうございます こちらであってましたか?
m.ts10806

2020/02/03 00:13

はい。コード部分はオーケーです。 で、 >再インストールして これはなにを再インストールしたのでしょうか? 見ている側はあくまで赤の他人なので、目的語や主語が抜けるとなんのことを言っているのかわからなくなります。
m.ts10806

2020/02/03 00:52 編集

あと本件とは直接関係ないのですが、 html,head,bodyといったフレーム部分を担当するタグが全くないのもHTML構造としてはNGかと思います。 VSCode利用者ではないので詳しくはないのですが、最小構成のテンプレートなどは用意されてないのでしょうか?
d51

2020/02/03 01:08

失礼しました、再インストールは画像のデータです。 こちらはドットインストールの学習の最初の講座になります html,head,bodyはこれから書くのですがいきなり躓いていました。 ちょうど今他の方に教えていただき解決しました 長々と愚問にお付き合いいただきありがとうございました またよろしくお願い致します
m.ts10806

2020/02/03 01:16

画像は「インストール」ではなく「設置」としたほうが表現としては正しいです。 >html,head,bodyはこれから書くのですが それは家の建設で言うと基礎を用意せず部屋を設置していっているようなものなので、必ず先に置いてください。
m.ts10806

2020/02/03 01:22

ただ、「なぜはじめからドットインストールに聞かなかったんだろう」「なぜ私の回答がベストアンサーなのだろう」という疑問は残ります。
guest

回答3

0

おそらくドットインストールでの学習ですよね?
そもそもindex.htmlを作成するディレクトリが間違っているようなのでこのまま(課題通りに)進めてもうまくいかないと思います。
「index.html」は「MYPORTFOLIO」ディレクトリの中に作成してください。
そうしないと、他の方の指摘のようにパスが合わず、画像も出てこないし今後CSSも読み込めないと思います。

投稿2020/02/03 01:08

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

d51

2020/02/03 01:10

ありがとうございます ちょうど今ドットインストールの方にも教えていただき解決致しました
guest

0

ベストアンサー

index.htmlからだとその画像は
./basic_html_v5/MyPortfolio/img/taro.pngのようになると思います。

※画像見て手打ちしたので間違ってる可能性もあります。自身で確認してください。
つまり画像だと手打ちするしかないのでできればテキストで提示していただきたいですね

投稿2020/02/02 21:40

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

d51

2020/02/02 21:54

ありがとうございます。 以下のimg/taro.pngの部分を./basic_html_v5/MyPortfolio/img/taro.pngに変えてみましたが変化なしでした
m.ts10806

2020/02/02 22:37

「見た限り」です。”のようになる”と回答しています。 伝えたいのは「HTMLファイルから見た正しい相対パスにしてください」なので。 ブラウザ開発ツールのコンソールに404 Not Found のようなエラーが出ていれば「パスが間違っている」ということになります。
m.ts10806

2020/02/02 22:38

>パスとは 調べましょう。知っておかないとHTML、CSS、JavaScriptは進みません。 https://wa3.i-3-i.info/word1166.html あと「相対パス」「絶対パス」についても調べておいてください。
guest

0

パスが通ってないのではないですか?

投稿2020/02/02 21:36

Nippun

総合スコア1147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

d51

2020/02/02 21:40

回答ありがとうございます 初学者ゆえパスというものがまだ理解できておりません パスとはなんでしょうか? お手数おかけします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問