シナリオ:
<img src="filepath" alt="image not found">
これにより、ファイルがパスに見つからない場合、テキストがロードされるようになります....。
質問:代替テキストの代わりに画像をロードできますか?私の目的にすぐに役立つタグはありますか?#altタグで指定できるカスタムjavascript関数はありますか?
シナリオ:
<img src="filepath" alt="image not found">
これにより、ファイルがパスに見つからない場合、テキストがロードされるようになります....。
質問:代替テキストの代わりに画像をロードできますか?私の目的にすぐに役立つタグはありますか?#altタグで指定できるカスタムjavascript関数はありますか?
画像がJavaScriptに読み込まれているかどうかを確認できます。
var img = document.getElementById('image');
if ( img.complete && img.naturalWidth == 0 ) {
// some error, load alternate image:
img.src = "path to alternative img";
}
編集:完全な解決策(onerror
@JoDevの回答から使用)は次のようになります:
<script>
function validate (img) {
// Clear the callback to avoid infinite loop in case
// new image path would be also invalid.
img.onerror = null;
if ( img.complete && img.naturalWidth == 0 ) {
// some error, load alternate image:
img.src = "http://example.com/valid_path.png";
}
}
</script>
<img onerror="javascript:validate(this);"
src="http://example.com/some_invalid_path.png"/>
あなたがこれを作ることを可能にする特別なイベントがあります。これは :
<img src="" onerror="this.src='path/to/default'" />
以下のコードを参照してください。
onerror関数内に、ロードするsrcパスを追加します。srcが画像の場合、画像が読み込まれます。
<img onerror="this.onerror=null;this.src='http://www.personal.psu.edu/oeo5025/jpg.jpg'" id="ddd"
src='http://www.loveimagesdownload.com/wp-content/uploads/2016/08/declaration-of-love_23-2147517078.jpg'/>