Vue请求网络图片或者接口图片为空、错误时,使用默认图片

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()函数来加载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值