需求:

有时候我们请求图片报如下错误:

解决办法:

这里我用百度的图片举个栗子,当你发现如下错误:

GET https://www.baidu.com/image/online.png 404 (Not Found) 

 说明了网络图片请求失败或者说不存在,则在img中添加onerror事件:

<img src="https://www.baidu.com/image/online.png" onerror="javascript:this.src='/image/location.png'">

如果线上的online.png不存在,则会自行使用本地的location.img;

/***

**  注意事项1:

**      onerror事件只适用于以下标签: <img>, <input type="image">, <object>, <script>, <style>;

**  注意事项2:

**      img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404;

**      解决方法:<img src="image.gif" οnerrοr="javascript:this.src='src/images/default.jpg';this.onerror = null">

***/

拓展:

1.>>>点击查看W3C的onerror事件用法

2.>>>点击查看菜鸟教程的onerror事件用法

3.>>>background-image图片错误如何处理? 传送门>>>Stack Overflow(记得科学上网才能打开)

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐