画像をブラウザ上に表示させたい

前提・実現したいこと

vs code上で書いているコードで
事前にダウンロードしたpng画像をブラウザ上に表示させたい

発生している問題・エラーメッセージ

該当のソースコード

html
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4
5  <head>
6    
7    <meta charset="utf-8">
8    <title>CSSの練習です</title>
9    <link rel="stylesheet" href="css/styles.css">
10
11  </head>
12
13  <body>
14    <h1>見出し</h1>
15    <p> <img src="../img/logo.png" width="100"
16      height="100" alt="">**__ こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
17
18    <h2>見出し</h2>
19    <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
20
21  </body>
22
23</html>
24
25
26
27このコードのh1内のimgタグの画像です。
28フォルダはこのようになっています。
29![イメージ説明](73a0243e2c9a10854062d27e1ffdd652.png)
30
31### 試したこと
32
33imgタグ内のコードを
34src="img/logo.png"　にしましたがダメでした。
35
36ご回答お願い致します。

hatsu

2020/02/22 12:45

VS Codeのindex.htmlのファイルパスを見ると、`css > index.html`と書かれていることから、CSSフォルダにhtmlファイルが入っているかと思います。 css,img,htmlがまとまっているフォルダの全体を見たいです。

行動規範の内容に同意します

回答1件

ベストアンサー

結論から申し上げますとフォルダ構造がおかしいです。

index.htmlの赤枠を見るとファイルはCSSフォルダにindex.htmlが格納されてます。そこのHTMLタグの/HEADをいま選択しているとなってます。（左の赤枠で分かります）

CSSファイルはCSSフォルダのCSSファイルになってます。（右の赤枠部分）

正しくは以下のようなフォルダ構造にしないとだめ（ダメとは言い過ぎかもですが意図した結果になりません）

HTMLを格納するフォルダを便宜上作りましたここにindex.htmlが格納されていて
画像の左のツリーを見ていただくとHTMLフォルダの中にCSSフォルダが存在しそこにCSSファイルが存在します。

そうであるとあなたのindex.htmlで記述されてます

html
1<link rel="stylesheet" href="css/styles.css">

これは、index.htmlが存在するフォルダにCSSというフォルダがあって、そこからstyles.cssを読み込んでねという指示なのでこの構造にならないといけません

正しい構造はこの画面のようになります、
TESTフォルダの中にHTMLフォルダがあってそこにindex.htmlが存在し（白矢印）
HTMLフォルダの中にCSSというフォルダがあってそこにCSSファイルが存在し（赤矢印）
TESTフォルダのHTMLフォルダと同じ階層にIMGフォルダがあってそこから画像を持ってきてねと指示されています