meishidaQS/pages/index/BigimageView.vue

<template>
	<view style="width: 100%;height: 100%;">
		<movable-area class="zoomablev" :scale-area="true">
			<movable-view class="map-show-wrap" scale='true' direction='all' out-of-bounds='true' scale-max='2'>
				<view style="width:100vw;height: 100vh;">
					<image style="width:100%;height: 100%;" :src="compleurl(mysrc)" mode="aspectFit" @load="complet"></image>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mysrc: '',
				baseUrl:'https://backend.awayqtw.com/prod-api',
			}
		},
		onLoad(option) {
			this.mysrc = option.mysrc;
		},
		methods: {
			compleurl(url){
				console.log('------compleurl',url)
				if(!url){
					return '';
				}
				if(url.length<8){
					return '';
				}
				uni.showLoading({
					title:'Loading...',
					mask:false
				})
				var http= url.substring(0,8);
				if(http==='https://'){
					return url;
				}
				else if(http==='/static/'){
					return url;
				}
				else if(http==='file:///'){
					return url;
				}
				else{
					return (this.baseUrl+url);
				}
			},
			complet(e){
				console.log(e);
				uni.hideLoading();
			},
			
		},
	}
</script>

<style scoped>
/* 自定义样式 */
.container {
  /* ... */
}
 
.zoomablev{
  width: 100vw;
  height: 100vh;
}

.map-show-wrap {
  width: 100%;
  height: 100%;
}
</style>