「onerror」イベントを使用することで、エラーが発生した場合に代替のイメージやエラーメッセージを表示することができます。以下に、シンプルかつ簡単な方法といくつかのコード例を示します。
-
イメージ要素に直接「onerror」属性を追加する方法:
<img src="path/to/image.jpg" onerror="this.src='path/to/error-image.jpg';">
上記のコードでは、イメージの読み込みに失敗した場合に「error-image.jpg」を代替のイメージとして表示します。
-
JavaScriptで「onerror」イベントを処理する方法:
<img id="myImage" src="path/to/image.jpg">
var image = document.getElementById("myImage"); image.onerror = function() { image.src = "path/to/error-image.jpg"; };
上記のコードでは、JavaScriptを使用して「onerror」イベントを処理し、エラーが発生した場合に「error-image.jpg」を代替のイメージとして表示します。
これらの方法を使用することで、イメージの読み込みエラーに対するエラーハンドリングが容易になります。適切な代替イメージやエラーメッセージを表示することで、ユーザーエクスペリエンスを向上させることができます。