CSS と HTML を使用して壊れた画像を非表示にしたり置き換えたりするにはどうすればよいですか?

CSS/HTML を使用した壊れた画像プレースホルダーの非表示

壊れた画像リンクの検出における CSS と HTML の制限にもかかわらず、最小限の回避策があります。そのようなインスタンスを隠すか管理します。

壊れたものを隠す画像

壊れた画像プレースホルダーを目立たなくするには、 内の onerror 属性を利用できます。 tag:

<img src="Error.src" onerror="this.style.display='none'" />

この属性を指定すると、画像の読み込みに失敗した場合に表示が非表示になります。

バックアップ画像に置き換える

あるいは、壊れた場合に備えて代替イメージを指定することもできます。 links:

<img src="Error.src" onerror="this.src='fallback-img.jpg'" />

画像の読み込みに失敗すると、ソースは指定された代替画像に切り替わります。

注: CSS と HTML だけでは区別できません。壊れた画像と有効な画像の間では、onerror 属性はどちらの場合でも壊れた画像のプレースホルダーを処理するのに役立ちます。

追加オプション

サイト全体で複数の破損した画像を管理する場合、JavaScript はより堅牢なソリューションを提供します。イベント リスナーを DOM にアタッチして、同じロジックをページ上のすべての画像に適用できます。

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
      img.onerror = function(){this.style.display='none';};
   })
});

このスクリプトは、DOM が完全に読み込まれた後、すべての壊れた画像に display: none スタイルを適用します。

以上がCSS と HTML を使用して壊れた画像を非表示にしたり置き換えたりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。