在前端开发中，常常需要使用图片来展示内容。但是，有时候我们并不确定图片的链接是否有效，如果直接使用这样的链接，会造成页面加载缓慢或者显示错误的情况。因此，在使用图片之前，我们应该先对图片链接进行检查，确保它们有效，避免出现问题。
检查图片链接的方法
1. 使用 onerror 事件
<img> 标签具有一个 onerror 事件，该事件在图片加载失败时触发。我们可以通过在 <img> 标签上绑定 onerror 事件来检测图片链接是否有效。具体实现代码如下：
<img src="https://example.com/image.jpg" onerror="this.onerror=null;this.src='https://example.com/placeholder.jpg';">
这段代码的作用是，如果图片加载失败，则将图片的 src 属性替换为一个默认的占位图。
2. 使用 JavaScript
如果我们想要在 JavaScript 中检查一个图片链接是否有效，可以使用 Image 对象。Image 对象具有一个 onerror 事件，与 <img> 标签的 onerror 事件相同。具体实现代码如下：
-- -------------------- ---- ------- -------- --------------- ---------------- -------------- - ----- --- - --- -------- ---------- - ---------------- ----------- - -------------- ------- - ---- - ------------------------------------------- ---------- - ---------------------- -- ---------- - ---------------------- ---
这段代码的作用是，检查 https://example.com/image.jpg 是否有效。如果有效，则执行 successCallback 函数；如果无效，则执行 errorCallback 函数。
总结
在前端开发中，正确处理图片链接是非常重要的。通过本文介绍的方法，我们可以轻松地检查一个图片链接是否有效，提高页面加载速度和用户体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30462