AMPで画像が表示されないときの原因３パターン

通常のHTMLからAMPに書き換えた際、なぜか画像が表示されない。

そんなときに、ハマりやすい原因を紹介します。

１．layout属性に「intrinsic」を指定している

Firefoxブラウザでのみ発生した現象ですが、 layou属性に「intrinsic」を使っていたことで、画像が表示されなかったり、遅れて表示されたり、一番下までスクロールして戻ると表示されていたりと、表示が不安定な不具合が発生しました。

原因は、layout属性に「intrinsic」を指定していたこと。

「responsive」に戻したら正常に表示されるようになりました。

「intrinsic」を使いたい場面でしたが、画像表示が不安定になるのは困ります。

いずれ改善されるでしょうが、現段階ではまだ「responsive」を使用していた方が良さそうです。

新しいプロパティや属性は便利ですが、なにかとトラブルの原因になることが多いです。

ハマったら、一度プロパティや属性を全て削除してみると、原因が見えてくることがあります。

２．</amp-img>タグの閉め忘れ

通常の<img>タグでは、タグを閉める必要がない為、忘れやすい項目です。

</amp-img>タグでしっかり閉められていますか？

３．画像の拡張子が大文字になっている

通常のimgでも同様の現象になるのですが、画像パスの拡張子は小文字で指定しているのに、実際の画像ファイルの拡張子は大文字になっている場合、ローカルではきちんと表示されるのに、サーバーにアップした状態では表示されないというやっかいな現象が起きます。

コード

<amp-img src="sample.jpg" width="200" height="200" layout="responsive">

実際の画像ファイル

sample.JPG

クライアントから送られてくるファイルは、なぜかこのように拡張子が大文字になっていることがあるので、ハマりやすいパターンです。