img标签加载图片404错误解决方案
一、前言
在开发中,使用<img src = "/img/yys.png" />加载图片时,会有404错误,也就是图片未找到问题。
现将解决办法 总结如下:
二、解决方案
当图片未找到或者404时,就会触发<img />标签的 onerror 属性显示其中的图片。
1、直接拼写路径方式:
<img src = "img/yys.png" onerror = "javascript:this.src = 'img/default.png'" />
2、事件绑定方式:
<img src = "img/yys.png" onerror = "javascript:getImage('img/default.png')" />
function getImage(imgUrl) {
var img = event.srcElement;
img.src = imgUrl;
}
------------------------------------- ↓↓↓↓↓ -------------------------------------
特别注意:如果默认图片(img/default.png)也不存在,如何解决:
<img src = "img/yys.png" onerror = "this.onerror = ''; this.src = 'img/default.png'" />
------------------------------------- ↑↑↑↑↑ -------------------------------------
Now ~ ~ ~写到这里,就写完了,如果有幸帮助到你,请记得关注我,共同一起见证我们的成长。