画像が存在しない場合、HTMLでデフォルト画像を表示する例

画像リンク <img src="" /> URLが有効かどうかをjsで判断したい場合 404ならデフォルト画像パスをロードする。

<img src="xxx" οnerrοr="this.src=default image address"/>

画像タグimgのonerrorイベント

<img src="pic.gif" οnerrοr="javascript:this.src='default image address';" alt="pic" />

分析 画像が存在しない場合に発生するonerrorに特に注意し、onerrorはimgにデフォルト画像を指定する。つまり、画像が存在すればpic.gifが表示され、存在しなければデフォルトの画像が表示される。

問題：デフォルト画像も存在しない場合、onerrorが発動し続け、ループが発生するため、エラーになる。画像は存在するが、ネットワークが非常に悪い場合にも、onerrorが発生する可能性がある。

回避策 デフォルト画像を一度だけ読み込む関数で読み込む。

<img src="abc.jpg" onerror="nofind()" />
<script type="text/javascript">
function nofind(){
  var img=event.srcElement;
  img.src="http://mat1.gtimg.com/cd/2017/home/nlogo0518.png"; //replaced image
  img.onerror=null; //control not to keep triggering errors
}
</script>

この記事は、HTMLの画像は、デフォルトの画像の例を表示するために存在しないについて、これに導入され、より関連するHTMLの画像は、デフォルトの内容を表示するために存在しないスクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！...