JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します

JavaScript コード

　//图像加载出错时的处理
function errorImg(img) {
img.src = "默认图片.jpg";
img.onerror = null;
}

HTML コード

<img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%"  onerror="errorImg(this)" / alt="JavaScript は alt_javascript トリックの代わりに onerror を使用してデフォルトの画像表示を設定します" >

見た目を美しくするため、ウェブページの画像が存在しない場合、クロス画像は表示されません

の場合 ページ表示時に画像が移動したり消失したりすると、ページ上に×印の画像が表示され、ユーザーエクスペリエンスに大きな影響を与えます。 alt属性を使って「○○の写真」というプロンプトメッセージを出してもあまり効果はありません。
実際、これは次のように処理できます。画像が存在しない場合、onerror イベントがトリガーされます。

1. この画像要素を非表示にします:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2. デフォルトの画像に置き換えます:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src='默认图片的url地址'"/>

注: 不適切に使用すると、IE ベースのブラウザで無限ループが発生します。例: [デフォルト画像の URL アドレス] の読み込みに失敗した場合 (ネットワーク速度が比較的遅い場合など)、または存在しない場合、繰り返し読み込みが行われ、最終的にはスタック オーバーフロー エラーが発生します。

したがって、問題を解決するには次の 2 つの方法を使用する必要があります:

a. エラー コードを他の処理方法に変更するか、デフォルトの画像が確実に使用されるようにします。 onerror は十分小さく、存在します。

b. onerror イベントが 1 回だけトリガーされるように制御するには、次の文を追加する必要があります: this.onerror=null; 追加後は次のようになります。 >

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src='默认图片的url地址;this.onerror=null'"/>

テスト後、上記の方法は IE、Google、Firefox ブラウザーのすべてのバージョンでサポートされています。

上記は、JavaScript が alt_javascript テクニックの代わりに onerror を使用してデフォルトの画像表示を設定する方法です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。