2021年vue3版本的image加载出错时替换为默认图片的正确做法
首先呢,大家百度这个做法的时候都是这样的:额,不能说不行,反正我试了试不太行,因为——大人,时代变了啊vue都更新到vue3了,我这个版本event.srcElement在chrome浏览器中都会报错,但是感觉这个函数的作用和getelementbyid函数的作用很像,都是拿元素嘛。那么我的做法如下(前情提要:我有很多张图片都需要在加载出错时改为默认图片)在html中,要给图片加id和error事
首先呢,大家百度这个做法的时候都是这样的:
额,不能说不行,反正我试了试不太行,因为——大人,时代变了啊
vue都更新到vue3了,我这个版本event.srcElement在chrome浏览器中都会报错,但是感觉这个函数的作用和getelementbyid函数的作用很像,都是拿元素嘛。那么我的做法如下(前情提要:我有很多张图片都需要在加载出错时改为默认图片)
在html中,要给图片加id和error事件,这个事件也挺奇怪的,众所周知,应当用v-model绑定html事件,查了一下html事件,加载出错的时候的事件应为“onerror”,但是在vue上写的时候,打出@发现后面的事件没有"onerror",只有“error”,所以我使用了error
<img :id="state.id" :src="xxxxx" @error="loadFail()" />
script中的函数如下:
const loadFail = () =>{
console.log("image load failed")
var image = document.getElementById(state.id)
image.src= defaultimg //或者改为图片地址,我这里的defaultimg=‘图片地址’
image.οnerrοr=null
console.log(image)
}
或者可以根据自己的需要该点别的,或者改一改代码探索一下,到底是error还是onerror还是这俩一样呢?我这改一次要等二十分钟,要赶紧交差了,这些问题就留给大家去想了。
最后,如果对你有帮助,作者君不求打赏,只希望能给个赞赞^-^
更多推荐
所有评论(0)