vue全局给img标签设置默认图片

Img标签添加默认图片

Tips: Vue项目, 无论是vue2还是vue3,同样适用

按照正常的写法, 需要在图片上添加onerror事件,然后改变src的值

<img src="xxx.png" onerror="e => e.target.value = 'error.png'" />

但是如果我们在项目已经开发大半, 页面里有无数个img标签时, 再添加这个, 想想就让人绝望

这时只需在 main.js 中添加一小段代码, 就可以完美的在全局给img标签设置默认图片

import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
	...
	.mixin({
    	mounted() {
	      this.$nextTick(() => {
	        const images = document.getElementsByTagName('img')
	        for (let i = 0; i < images.length; i++) {
	          images[i].addEventListener('error', this.handleImageError)
	        }
	      })
	    },
	    methods: {
	      handleImageError(event) {
	        event.target.src = require('@/assets/error.png') // 只需要将此路径换成对应的默认图片路径即可
	      },
	    },
	})
	.mount('#app')