HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効かどうかを判断します。404の場合は、デフォルトの画像パスを読み込みます

<img src="xxx" source="this.src=デフォルトの画像アドレス"/>

画像タグ img の onerror イベント

<img src="pic.gif" background="javascript:this.src='デフォルトの画像アドレス';" alt="pic" />

分析: onerror に特に注意してください。画像が存在しない場合は onerror がトリガーされ、onerror の img にデフォルトの画像が指定されます。つまり、画像が存在する場合は pic.gif が表示され、画像が存在しない場合はデフォルトの画像が表示されます。

既存の問題: デフォルトのイメージが存在しない場合は、onerror が引き続きトリガーされ、ループとエラーが発生します。イメージは存在するがネットワークが非常に貧弱な場合は、onerror もトリガーされる可能性があります。

解決策: 関数を使用してデフォルトの画像を読み込み、一度だけ読み込む

<img src="abc.jpg" onerror="nofind()" />
<script type="text/javascript">
関数nofind(){
  var img = イベント.src要素;
  img.src="upload/2022/web/nlogo0518.png"; // 置き換えた画像 img.onerror=null; // 常にエラーが発生しないように制御します}
</スクリプト>

HTML 内に画像が存在しない場合に、デフォルトの画像を表示する例についての記事はこれで終わりです。HTML 内に画像が存在しない場合に、デフォルトの画像を表示する方法の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。