vue封装image组件，处理图片获取失败的情况

前台向后台发起图片请求，如果图片在数据库中删除了或者拒绝访问，则默认的image无法显示图片，为了更友好的体验，我们可以给一张默认图片，这里使用的是uni-app框架

<template>
	<image @load="imageLoad" @error="imageErr" :src="imageSrc" mode="aspectFill" >        
    </image>
</template>

<script>
	const defaultImage = '../../static/image/errorImage.png'
	
	export default {
		data() {
			return {
				imageSrc: this.srcData
			}
		},
		
		watch: {
			srcData (newVal) {
				this.imageSrc = newVal
			}
		},
		
		props:{
			srcData: {
				default: '',
				type: String
			}
		},
		
		methods: {
			imageErr (e) {
				this.srcData && (this.imageSrc = defaultImage)
				this.$forceUpdate()
			},
			imageLoad (e) {
				console.log("加载完成---",e)
			}
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}
</style>

<change-Image :src-data="imageItem"></change-Image>

通过全局注册组件后，可以在多处使用

首页，传入子组件需要的prop属性（图片的url），子组建接收到后赋值给imageSrc, 如果image渲染图片失败，则触发imageErr事件，将图片地址替换成提示图片

注意：如果子组建中的props属性使用camelCase (驼峰命名法) ，在引用时需要kebab-case (短横线分隔命名) 命名，否者不能正确获取

https://cn.vuejs.org/v2/guide/components-props.html