来源:https://blog.csdn.net/qq_39224266/article/details/82291229
当图片未找到或者404时,触发 onerror 显示其中的图片:
<img src="assets/img/img.png" onerror="this.src='assets/img/default.png'"/>
当图片 img.png 未找到时,会默认显示 default.png,但若是默认图片也没找到,会引起崩溃,所以写成以下形式,这样当默认图也没找到时便会显示裂图图标了:
<img src="assets/img/img.png" onerror="this.οnerrοr='';this.src='assets/img/default.png'"/>
我试了上面这个方法,发现找不到默认图片时,还是一直加载,导致出错
在 VUE 中可以写为:
<div> <img :src="pic" :onerror="img404"> </div> <script> export default { data () { return { pic: "XXX.png", img404: "this.οnerrοr='';this.src='" + require('default.png') + "'" } } </script>