画像が反映されない(ドットインストールの内容に沿ってやっています）

<!DOCTYPE html> <html lang = "ja"> <head> <meta charset="utf-8"> <title>ささみわらびのプロフィール</title> <link rel="icon" href="favicon.ico"> <meta name="description" content="ささみわらびのプロフィールだす。"> </head> <body> <img src = "img/taro.png" width= "120" height="120" arl="たろうの画像"> <h1>ささみわらび</h1> <p>sasamiwarabi</p>

  <h2>WORKS</h2>

   <img src= "img/work1.png" width="400" height="260" alt= "勇者ゲームの紹介画像">
   <h3>勇者ゲーム</h3>
   <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</h3>

   <img src= "img/work2.png" width="400" height="260" alt= "宝探しゲームの紹介画像">

   <h3>宝探しゲーム</h3>
   <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</h3>

   <img src= "img/work3.png" width="400" height="260" alt= "神経衰弱の紹介画像">
   <h3>神経衰弱ゲーム</h3>
   <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</h3>
  <p>(c) dotinstall.com </p>

</body> </html>

m.ts10806

2019/09/04 00:21

コードはマークダウンのcode機能を利用してご提示ください。また、「画像が反映されない」にしても幾つか画像があるようですしどうなっているのか詳しく記載してください。できれば質問テンプレートを利用してください。

m.ts10806

2019/09/04 00:27

あとそれぞれのファイルの階層が分かるような情報もご提示ください。

sasamiwarabi

2019/09/04 00:53

再度０からやってみます。画像とフォルダ関係とコードの紐付けが適正かもう一度確認してみます。

m.ts10806

2019/09/04 00:54

質問は編集できますので適宜ご対応ください。

dit.

2019/09/04 01:25

m.ts10806さんも言っていますが、teratailには質問を見やすくするための仕組みがあります。 ```html ここにコードを記載 ``` の形にしてください。質問は編集できます。コードの部分を選択し、<code>というボタンを押すことでも可能です。

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

回答2件

ベストアンサー

いくつか気になった点を指摘しておきます。

altがarlになっている
<img src = "img/taro.png" width= "120" height="120" arl="たろうの画像">

閉じが<h3>になっている
<p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</h3>

workと3の間に何か制御文字？
<img src= "img/work3.png" width="400" height="260" alt= "神経衰弱の紹介画像">

この辺りが修正できれば、あとはhtmlファイルとimgフォルダの関係性だけ確認すればほぼ大丈夫だと思います。

投稿2019/09/04 01:30

dit.

総合スコア3235

m.ts10806

2019/09/04 01:45

８割がたできてるとか嘘ついてしまった。構文修正が先ですね

dit.

2019/09/04 02:00

ドットインストールのこのあたりの学習をしているという方の質問を見るとだいたいパスの問題ですからね。実際、GoogleChrome、IE、Firefoxそれぞれ最新版で確認したところ、質問に提示のままのコードで（ただし正しいフォルダ関係で）画像は表示されました。

m.ts10806

2019/09/04 02:05

オンライン学習系が推奨しているエディタが気になります。

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

指定した場所に画像がないか、指定が間違っているか、画像が破損しているか
のどれかなので確認してください。
（画像に限らず、HTMLから何かしらのファイルを参照しようとして出ない場合はたいてい同じです）
ブラウザ開発ツールから色々確認してみると良いでしょう。
HTMLも疑似的にいじれるのでパスの調整も実際のコードを触ることなくできます。

投稿2019/09/04 00:46

m.ts10806

総合スコア80850