vue 图片加载中默认图片的封装组件

这几天做项目，老遇到<img> 标签 ，加载失败需要显示默认图标的需求， 如下

<img :src= "baseImage + item. id"/>

data(){
	return {
		baseImage: 'http://192.168.110.15/imgs?id='	
	}
}

类似上面的代码, 图片的服务为地址 + Id 的形式， 按照以前的写法，我是这样写的

<img :src= "baseImage" @error="getDefault"/>
import defalutImg from '../imgs/default.png'
data(){
	return {
		baseImage: 'http://192.168.110.15/imgs?id='	,
		defaultImg: defalutImg
	}
},
methods:{
	getDefault() {
		this.baseImage = this.defaultImg
	}
}
``

其实 上面这些也是可以的，但是 有个问题 ，如果一个页面多张图片，就尴尬了
要多个defaultImg, ，所以，思考了一下，这个情况下， 就应该考虑，搞一个组件了。

利用 v-if 和多个img 就可以简单搞定，简单的而且用还爽

<template>
    <img
        v-if= "show"
        :src="src"
        @onerror="imgLoadError"
    />
     <img
        v-else
        :src="defaultImg"
    />
</template>


<script
    export default {
        name: "ErroImg",
        props: {
            src:{
                type: String,
                default: ''
            },
            defaultImg: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                show: true
            }
        },
        methods: {
            imgLoadError() {
                this.show = false
            }
        }
    }


></script>

这里利用了v-if 是display: none 的特性， 所以加载图片错误会触发错误的方法，
这样 里 简单利用两个图片标签，解决了棘手的问题

后期扩展 还可以加入 正在加载中的显示图片