HTML文書 画像が正しく表示されません。

大学の授業で、HTMLとCSSによる簡単なWebページ制作を行っています。
HTML文書に画像を入れる段階で行き詰っています。大学の指示書にある通りに文書を打っているつもりなのですが、ブラウザに画像が表示されません。

以下に、①大学からの指示書に書かれた例と、②自分の打った文書を書きましたので、どこが間違っているか、どのように直すべきかをご教示いただきたいです。

①大学からの指示書の例
<img src="画像が格納されているフォルダの名前"/画像の名前" alt="画像の説明">

②自分の打った文書
<img src="webpage"/logo1"alt="イベントのロゴ">

まず、ネットで検索して出てきた画像を「名前を付けて保存」しました。その際、「logo1」という名前をつけたため、指示書の例の「"画像の名前"」にあたる部分を「"logo1"」としました。

また、この画像を「webpage」というフォルダ内に保存したので、「"画像が格納されているフォルダの名前"」にあたる部分に「"webpage"」と打ち込みました。

「"画像の説明"」については「"イベントのロゴ"」と打ち込んだものがブラウザに正常に表示されました。（ここは問題なくできたということです）

分かりにくい説明で申し訳ございません。お時間のある方からのご回答お待ちしております。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： cametan_42 回答日時： 2021/06/30 11:35

✗ <img src="webpage"/logo1"alt="イベントのロゴ">

○ <img src="webpage/logo1" alt="イベントのロゴ">

貴方の書いたHMTLだと、そもそもWebページ自体が規格上正しく表示されないんですよ。
もっとも、ブラウザ側が「素人がWebページを作る」って前提で設計されてる例が多いんで、かなり緩く「許してくれる」パターンが多いんですがね。
文字列"～"の"と"の帳尻はキチンと合わさないとなりません。

あとね、例えば教えて!gooでも・・・多分ここの右側にドクターとか色彩検定1級のねーちゃんとかいるでしょ?こいつらがどういうアドレス持ってるのか、見てみれば良い。
写真を右クリックして例えば「画像のリンクをコピー」してアドレス調べてみたり、またはこのページ上で右クリックして例えば「ページのソースを表示」してみたりして、どういう風に写真へのリンクが書かれてるのか参考にしてみて下さい(まぁ、フルパスで書かれてるからある意味参考にならんしびっくりするかもしれませんが、ヒントにはなるでしょう)。

あともう一つ。


> まず、ネットで検索して出てきた画像を「名前を付けて保存」しました。その際、「logo1」という名前をつけたため、指示書の例の「"画像の名前"」にあたる部分を「"logo1"」としました。

なるたけ拡張子を付けるようにしましょう。
環境がWindowsだと仮定して話をしますが、プログラミング系は「拡張子が見える」設定にしておく方が吉、です。
そうじゃないととんでもないトコでポカをしたりします。

Windows 10 ファイルの拡張子を表示させる方法:
https://www.pc-koubou.jp/magazine/36291

場合によっては、logo1と名付けたつもりだったのが拡張子が隠れてて、実はlogo1.pngで、ファイル名が違ったんでアクセス出来なかった・・・なんつーのもあるあるなんでね。
(逆に、拡張子を表示させない設定にしててlogo1.pngにしたつもりが実はlog1.png.jpgだった、とか言うのもあるあるです。)

この回答へのお礼

非常に分かりやすい説明ありがとうございます！

お礼日時：2021/06/30 11:41