画像が存在しない、もしくは1pxの画像を検知したい

やりたいこと

画像が存在しない、もしくは1pxの画像の場合に検知して、display:noneしたい

現状と試したこと

下記のコード内の画像は、存在しない場合に、おそらく1pxの画像がレスポンスとして返されるようです。
ブラウザのコンソールでは、404エラーが発生していますが、画像にアクセスすると1pxの画像が表示されるためです。

しかし、onerrorでも、addEventListenerでも、検知できませんでした。
(window.alert等を仕込んでも何も発火しませんでした)
何か分かることがあれば、アドバイスいただけますと幸いです。

HTML

1<img src="https://newsatcl-pctr.c.yimg.jp/t/amd-img/20230714-00000021-dal-000-2-view.jpg?pri=l&w=300&h=300&order=c2r&cx=192&cy=0&cw=1888&ch=1888&exp=10800" onerror="window.alert('エラー発生')"> 2 3<script> 4 window.addEventListener('DOMContentLoaded', function() { 5 var imgs = document.querySelectorAll('img'); 6 7 imgs.forEach(function(img) { 8 img.addEventListener('load', function() { 9 if (img.width < 2 || img.height < 2) { 10 var imgBox = img.closest('.imgBox'); 11 if (imgBox) { 12 imgBox.style.display = 'none'; 13 } 14 } 15 }); 16 }); 17 }); 18</script>

イメージ説明

コメントを投稿

0 コメント