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 的特性， 所以加載圖片錯誤會觸發錯誤的方法，
這樣 裏 簡單利用兩個圖片標籤，解決了棘手的問題

後期擴展 還可以加入 正在加載中的顯示圖片