如何判断网页中图片加载成功或者失败

使用onload事件运行加载成功，使用onerror事件判断失败

补充

补充：<img> 元素提供了 load（加载成功）和 error（加载失败）两个事件，分别对应图片成功加载或加载失败。需要注意以下几点：

1. error 事件对于跨域图片在某些浏览器里无法触发（除非服务端返回正确的 CORS 头）；
2. complete 属性可即时判断图片是否已经加载完成（true 表示已结束，无论成功还是失败）；
3. 缓存命中时 load 可能不会触发，此时应优先判断 complete。

const img = new Image()
img.onload = function () { console.log('loaded:', img.width, img.height) }
img.onerror = function () { console.log('failed to load') }
img.src = 'https://example.com/foo.png'

来源整理自：vue3js.cn 面试官系列