VUE项目使用axios请求百度线上图片时,报403错误
这样状态的图片不处理,那么页面就会显得很难看,不太友好, 所以想到的解决方案是:
1.如果图片请求为空或者请求发生了错误,是不是可以使用默认图片替代了错误图片呢?
这个方案当然是可行,那么开始解决吧…
1.1 首先我们需要知道,我们图片发生了错误了,我们怎么知道错误,然后触发错误事件,进行对错误图片的处理呢?
很好,VUE为我们提供了@error。
<img :src="item.backgrounImg" @error="defaultBackImg">
只需要在方法区写@error对应的方法来处理错误图片即可
defaultBackImg() {
if(event.type == "error") {
event.target.src= require("../assets/imgs/backg.jpg")
}
},
Vue的点击@click事件也是默认吧浏览器的event事件当做第一参数传入的,所以我们使用event事件来加载默认事件就可以了。
这样我们的图片就能正常显示了,错误的图片被本地默认图片覆盖了
<img data-v-de8d7450="" src="/img/backg.f58d1704.jpg">
需要注意一点的是,加载本地图片需要用require()函数来加载