Vue 图片加载404处理方法及全局注册函数

 Vue 图片加载异常处理

1.更换默认图片地址

 1.修改event.srcElement 属性

errorImg(event) {
  let img = event.srcElement
  img.src = require('@/assets/img/noImg.png')
  img.onerror = null //防止一直跳动
}

2. 修改event.target 属性

errorImg(event) {
  let img = event.target
  event.target.style.objectFit = 'contain' //保持图片尺寸不变
  img.src = require('@/assets/img/noImg.png')
  img.onerror = null //防止一直跳动
}

2. 将图片标签html置空

    errorImg(event) {
      event.target.outerHTML = ''
    },

全局注册函数

暂时排除使用Vue.use注册函数的方式（多写一些繁琐的代码）

公共函数js

function errorImg(event) {
  let img = event.srcElement
  img.src = require('@/assets/img/noImg.png')
  img.onerror = null //防止一直跳动
}

export default {
  errorImg,
}

main.js 引入

import pk from '@/public/public'
Vue.prototype.$pk = pk

在组件中使用

  methods: {
    errorImg(event) {
      this.$pk.errorImg(event)
    },
  }