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（）函数来加载

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue