Vue项目中,当图片无法显示时则显示默认图片

前言

项目中做了一个实时截图(轮循)，由前端发请求给服务器，然后服务器再通知终端截图，最后服务器将截图地址返回给前端。
这中间，终端截图上传会有一个时差问题，所以前端获取到的第一个截图地址是404,页面会在获取到正确图片的这段时间内显示空白，为了解决这一问题,了解到了onerror事件。下面我们就看看怎么在vue中使用它。

代码

<img :src="imgSrc" :onerror="imgLoading">

data() {
    return {
      imgLoading: 'this.src="' + require('@/assets/loading.gif') + '"'
    }
  }

扩展

在v-bind标签中，单引号’ ‘引用的内容作为字符串存在；双引号” “引用的内容作为变量/表达式存在，可以进行运算。