【解決】外部サイトの画像がスマホで表示されない（？アイコンになる）時の対処法

Webサイトの制作中、「PCブラウザでは画像が表示されるのに、スマホで見ると『？』アイコンになって表示されない」という現象に遭遇することがあります。

特に、外部サイトにある画像を <img> タグで読み込んでいる際に発生しやすく、記述ミスではないため原因の特定に時間がかかるケースが少なくありません。

今回は、この現象の技術的な原因と、最も簡潔な解決策を解説します。

現象の確認：なぜスマホだけ表示されないのか？

以下の条件に当てはまる場合、ブラウザの「リファラ（Referrer）ポリシー」が影響している可能性が高いです。

リファラとは、ブラウザが画像リクエストを送る際に「どのサイトから呼び出しているか」を相手のサーバーに伝える情報のことです。

昨今のスマホブラウザ（特にiPhoneのSafari等）はプライバシー保護のためにこの情報の扱いが厳格です。
また、画像側のサーバーが「自ドメイン以外からの呼び出し（直リンク）」を制限している場合、このリファラ情報が障壁となり、画像配信がブロックされてしまいます。

この問題を解決するには、<img> タグに referrerpolicy="no-referrer" を追記します。

<img src="https://gaibu-site.com/image.jpg" />
↓
<img src="https://gaibu-site.com/image.jpg" referrerpolicy="no-referrer" />

no-referrer を指定することで、ブラウザは「呼び出し元の情報（自サイトのURL）」を相手サーバーに送らずに画像をリクエストします。

サーバー側からは「ブラウザのアドレスバーに直接URLを入力してアクセスしてきた」のと同じ状態として認識されるため、サイト間の制限を回避して画像が表示されるようになります。

特定の画像のみが表示されない場合は、そのタグに直接 referrerpolicy="no-referrer" を追記するのが最も安全で簡潔な方法です。

<img src="https://example.com/image.jpg" referrerpolicy="no-referrer" />

この属性を指定することで、ブラウザは呼び出し元の情報を伏せてリクエストを送ります。相手サーバーからは「URLを直接入力してアクセスした」のと同等の扱いになるため、制限を回避できます。

外部画像を多用しており、個別のタグへの追記が困難な場合は、HTMLの <head> 内にメタタグを記述することで、ページ内の全リソースに対して一括でポリシーを適用できます。

<head>
  <meta name="referrer" content="no-referrer">
</head>

この方法は非常に強力ですが、以下の点に注意が必要です。

アクセス解析（GA4等）への影響
リファラを「送らない」設定にすると、Googleアナリティクスなどで「どこから自サイトに来たか」という流入元のデータが正しく計測できなくなる（すべて「Direct」扱いになる）可能性があります。
内部リンクへの影響
サイト内の回遊データも計測に支障が出る場合があるため、広告運用や詳細なユーザー行動分析を行っているサイトでは推奨されません。
セキュリティ対策（CSRF）
一部のシステムでは、リファラをチェックすることで不正なフォーム送信を防いでいる場合があります。その場合、システムが正常に動作しなくなる恐れがあります。

基本的には、影響範囲を最小限に抑えられる「解決策1（imgタグへの個別適用）」での対応を強く推奨します。