meishidaQS/components/myImage/myImage.vue

<template>
	<view>
		<image v-if="isIcon" style="border-radius: 55rpx;" :class="[mymode=='widthFix'?'imageW':'imagev']"  :src="showdefault==1?dfImage:baseUrl+comUrl" mode="scaleToFill" @error="imageError" @click="myimageclick"></image>
		<image v-if="!isIcon" :class="[mymode=='widthFix'?'imageW':'imagev']"  :src="showdefault==1?dfImage:baseUrl+comUrl" :mode="mymode" @error="imageError" @click="myimageclick"></image>
	</view>
</template>

<script>
	export default {
		name:"myImage",
		props:{
			mysrc: '',
			mymode:'',
			isIcon:false,
			defaultImage:''
		},
		data() {
			return {
				baseUrl:'https://backend.fooder.tw/prod-api',
				showdefault:0,
				comUrl:this.mysrc,
				dfImage:this.defaultImage
			};
		},
		watch: {
			mysrc(val){
				this.showdefault=0;
				this.comUrl = this.mysrc
				// console.log(this.baseUrl+this.comUrl);
			}
		},
		methods:{
			imageError(){
				if(this.dfImage==''||undefined==this.dfImage){
					this.dfImage='/static/logo.png';
				}
				this.showdefault=1;
			},
			myimageclick(comUrl){
				this.$emit('Emyimageclick',comUrl);
			},
		},
	}
</script>

<style>
	.imageW{
		margin: 0rpx;
		width:100%;
	}
	.imageH{
		margin: 0rpx;
		height:100%;
	}
	.imagev{
		width:100%;
		height:100%;
	}
</style>