HTML CSSに関する質問。 現在ポートフォリオ用に架空のウェブサイトを作成しています。メニュー表のページに画像を設定していますが、何度確認しても画像がサイトに反映されません。

Question

実現したいこと

メニューに掲載する料理の画像14枚を問題なく表示できるようにしたい。

発生している問題・分からないこと

現在ポートフォリオ用に架空のウェブサイトを作成しています。メニュー表のページに画像を設定していますが、何度確認しても画像がサイトに反映されません。メニュー表に掲載する料理の画像以外の画像は全て問題なく表示されています。

画像はメニュー以外の画像と同じく、しっかりとimagesというファイルに全て入っています。
webpだけではなくpngなどにも名前を変えて試してみましたが、メニューの料理画像だけが反映されないままです。Finderで画像ファイルを開いて動作確認を行いましたが、それに関しては問題なく画像を確認できました。ぜひお力添えとご指導いただけますと幸いです。

エラーメッセージ

メニュー表以外の画像は問題なく表示されていますが、メニュー表に表示する料理の画像だけが表示されない。

該当のソースコード

<main class="wrapper grid">
	<div class="item">
		<img src="images/menu1.webp alt="">
		<p>自由に選べる15種のブレンドコーヒー</p>
	</div>
	<div class="item">
		<img src="images/menu2.webp alt="">
		<p>ショートケーキ</p>
	</div>
	<div class="item">
		<img src="images/menu3.webp alt="">
		<p>チョコレートケーキ</p>
	</div>
	<div class="item">
		<img src="images/menu4.webp alt="">
		<p>チーズケーキ</p>
	</div>
	<div class="item">
		<img src="images/menu5.webp alt="" >
		<p>チョコレートブラウニー</p>
	</div>
	<div class="item">
		<img src="images/menu6.webp alt="">
		<p>カプチーノ</p>
	</div>
	<div class="item">
		<img src="images/menu7.webp alt="">
		<p>特製ラザニア</p>
	</div>
	<div class="item">
		<img src="images/menu8.webp alt="">
		<p>ムール貝のワイン蒸し</p>
	</div>
	<div class="item">
		<img src="images/menu9.webp alt="">
		<p>ナポリタンスパゲティ</p>
	</div>
	<div class="item">
		<img src="images/menu10.webp alt="">
		<p>根菜のグリル</p>
	</div>
	<div class="item">
		<img src="images/menu11.webp alt="">
		<p>フレンチトースト</p>
	</div>
	<div class="item">
		<img src="images/menu12.webp alt="">
		<p>特製ドーナツ</p>
	</div>
	<div class="item">
		<img src="images/menu13.webp alt="">
		<p>生ハムカプレーゼ</p>
	</div>
	<div class="item">
		<img src="images/menu14.webp alt="">
		<p>キャラメルフラペチーノ</p>
	</div>
	</div>
    </main>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

画像ファイルをpng , webp などに変更したが反応なし。

補足

特になし

Answer 1

<img src="images/menu1.webp alt="">とありますが、「images/menu1.webp」の後に「"」がありません。
専用のエディタを使えば、色分けですぐに気づくような問題ですので、それを使うことをオススメします。

Comments

[Setak05010]

回答ありがとうございます。
試したところ問題が解決しました！
丁寧にご説明いただきありがとうございます。

Answer 2

ファイル名が閉じていません
ご提示いただいたコードでは、srcのファイル名の最後がwebpと、**"(ダブルコーテーション)**になっていません
ご提示部分の全画像でそうなっています

<img src="images/menu1.webp alt="">

その為、ファイル名が「images/menu1.webp alt」と解釈されていると思われます。

<img src="images/menu1.webp" alt="">

のように、してください

Comments

[Setak05010]

回答ありがとうございます。
試したところ問題が解決しました！
丁寧にご説明いただきありがとうございます。

Answer 3

” を忘れずに記述する。