CTEQishou/components/netImage/netImage.vue

<template>
	<view :class="backgrS==1?'':'imageBGV'" :style="{width:width+'rpx',height:height+'rpx',borderRadius:bradius+'rpx'}">
		<image :style="{width:width+'rpx',height:height+'rpx',borderRadius:bradius+'rpx'}"  :src="compleurl(comUrl)" :mode="mymode" @error="imageError" @click="myimageclick"></image>
	</view>
</template>

<script>
	export default {
		name:"netImage",
		props:{
			mysrc: '',
			mymode:'',
			width:0,
			height:0,
			bradius:0,
			backgrS:0,
		},
		data() {
			return {
				defaultImage:'/static/logo.png',
				baseUrl:'https://backend.cityexpress168.com.vn/prod-api',
				showdefault:0,
				comUrl:this.mysrc
			};
		},
		watch: {
			mysrc(val){
				this.showdefault=0;
				this.comUrl = this.mysrc
				//console.log('watch-------------')
				//console.log(this.comUrl);
			}
		},
		methods:{
			imageError(){
				this.comUrl ='';// this.defaultImage;//morentup
				//console.log('imageError---------------')
				//console.log(this.baseUrl+this.comUrl)
				this.showdefault=1;
			},
			myimageclick(){
				this.$emit('Emyimageclick',this.comUrl);
			},
			compleurl(url){
				//console.log('------compleurl',url)
				if(!url){
					return '';
				}
				if(url.length<8){
					return '';
				}
				var https= url.substring(0,8);
				if(https==='https://'){
					return url;
				}
				var http= url.substring(0,7);
				if(http==='http://'){
					return url;
				}
				else if(http==='/static/'){
					return url;
				}
				else{
					//console.log(this.baseUrl+url);
					return (this.baseUrl+url);
				}
			}
		},
	}
</script>

<style>
	.imageBGV{
		background-color:floralwhite;
		border: 1rpx solid lightgray;
	}
</style>