とある作品ギャラリーのWebページ制作依頼で、img要素等で表示する作品の画像ファイルが見つからなかったとき代替画像を表示させたいという要望がありました。以下は例です。

<img src="img/test.png" alt="PNG画像" />
<hr />
<img src="img/test.jpg" alt="JPEG画像" />

画像が存在するときは正常に画像が表示されます。

画像ファイルがサーバから消えたり見つからず、404エラーとなった時のブラウザ表示。

エラーではなく代替画像を表示させるため、nginxのnginx.confに以下を設定しました。代替表示させる画像ファイルはあらかじめ用意しておき、サーバーへアップしておきます。

 location ~ .*\.(jpg|jpeg|png|svg|webp|gif)$
 {
  error_page 400 403 404 /40x.png;
 }

その後設定ファイルを再度読み込みWebサーバを再起動します。

画像が見つからないimg要素に代替画像を表示されました。

おしまい♥

タグ：nginx