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 的特性, 所以加载图片错误会触发错误的方法,
这样 里 简单利用两个图片标签,解决了棘手的问题

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值