使用img标签的onerror属性。 当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。 但是,注意哦,这里有个大坑哦,如果logoError.png 也不存在,则会继续触发 onerror,导致死循环,页面卡死。而且,就算图片存在,但网络很不通畅,也可能触发 onerror。 当然,解决办法是有的 例子:
// 直接加载
<img src="../../assets/img/timg.jpg">
// 设置为logo.png加载失败后显示的默认图片
<img src="/logo.png" onerror="this.src=../../assets/img/timg.jpg">
webpack改变图片的路径
<img src="/logo.png" :onerror="defaultImg">
data() {
return {
defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"'
}
}