这几天做项目,老遇到<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 的特性, 所以加载图片错误会触发错误的方法,
这样 里 简单利用两个图片标签,解决了棘手的问题
后期扩展 还可以加入 正在加载中的显示图片