100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue图片加载错误 图片加载失败的处理

Vue图片加载错误 图片加载失败的处理

时间:2024-04-17 01:18:15

相关推荐

Vue图片加载错误 图片加载失败的处理

加载一个图片pic,会在代码里做一个检验图片是否存在,通常会像下面这样写

<img :src="pic?pic:'../assets/img/load.png'" alt="">

这个判断只能判断pic是否存在,只有pic=''"的情况下,才会显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的路径呢?这个时候就要用onerror来检测图片加载错误,加载失败了

刚开始试了两种方法,都没有成功,

失败方法一:传送门:/qq_32786873/article/details/53483951

失败方法二:传送门:/question/27426689

不墨迹直接上方法,(在data里面先定义好失败的图片路径)

注意的几个点,我第一次写的就入坑了

1. onerror前面要用冒号 :

2. 注意看logo定义的格式,符号不要写错了

<!--template--><img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt=""><!--script--><script>export default {data() {return {errorImage: 'this.src="' + require('../assets/error.png') + '"' ,}},}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。