JavaScript、jQuery、または CSS を使用して壊れた画像アイコンを非表示にするにはどうすればよいですか?

JavaScript/jQuery/CSS で「画像が見つかりません」アイコンを自動的に非表示にする

レンダリングされた HTML ページに画像がない場合、デフォルト「画像が見つかりません」アイコンは気が散り、ユーザー エクスペリエンスを妨げる可能性があります。幸いなことに、さまざまなテクノロジーを使用してこのアイコンを非表示にする方法がいくつかあります。

JavaScript/jQuery

最も簡単な方法は、onerror イベント ハンドラーを使用することです。画像の読み込みに失敗すると、onerror イベントがトリガーされ、カスタム アクションを実行できるようになります。そのようなアクションの 1 つは、画像を非表示にすることです。

<img  src="/static/imghwm/default1.png" data-src="path/to/image.png" class="lazy" onerror="this.style.display = 'none';" alt="JavaScript、jQuery、または CSS を使用して壊れた画像アイコンを非表示にするにはどうすればよいですか?" >

CSS

CSS は、読み込みに失敗した画像に対して特定のスタイルを定義することで、より単純なアプローチを提供します。表示プロパティを使用すると、画像の表示/非表示を非表示に設定できます:

img.hide-if-failed {
    display: none;
}

次に、このクラスを画像に割り当てます:

<img  class="hide-if-failed lazy" src="/static/imghwm/default1.png" data-src="path/to/image.png" alt="JavaScript、jQuery、または CSS を使用して壊れた画像アイコンを非表示にするにはどうすればよいですか?" >

JavaScript/jQuery を使用他の要素を非表示にします

「画像が見つかりません」アイコンが別の要素内に含まれている場合、 div を使用すると、画像の読み込みに失敗したときに JavaScript または jQuery を使用して親要素を非表示にすることができます:

$('img').on('error', function() {
  $(this).parent().hide();
});

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