vue图片路径错误，展示默认图片

相信很多小伙伴都遇到过这个需求：当后端返回的图片路径为空，或者是返回的路径是错误的，需要展示默认图片

有个比较简单的方法：就是使用 img标签自带的 onerror 方法

但是这个方法在 src 为 null时，是不触发 onerror 方法的

所以当src为null时，直接将 默认图片 赋值给 src

<img 
  :src="item.url ? item.url : noneImg"
  @error="imgError(item)">

<script>

import noneImg from './images/noneImg.png'

export default {
  data() {
    noneImg
  },
  methods: {
    imgError(item) {
      let img = event.srcElement
      item.url = this.noneImg
      img.src = this.noneImg
      img.onerror = null  // 这里是防止img报错会一直触发
    }
  }
}

</script>