feat:远程图片

components/NormalImage/NormalImage.vue

@@ -3,7 +3,7 @@
 		<BasicText :elementInfo="elementInfo.option.title"></BasicText>
 		<u-empty 
 		 v-if="!elementInfo.option.images.list.length"></u-empty>
-		<u-image 
+		<u-image  class="uimage"
 		 v-if="elementInfo.option.images.list.length === 1" 
 		 width="100%"
 		 :height="imageHeight"
@@ -58,11 +58,11 @@
 		flex-direction: column;
 		height: 100%;
 		overflow: hidden;
-
-		image {
+}
+    .uimage {
 			max-width: 100%;
 			max-height: 100%;
 			object-fit: contain;
 		}
-	}
+	
 </style>

components/RemoteImage/RemoteImage.vue

+<template>
+	<view class="remoteView">
+	  <u-image
+	  class="remoteImage"
+	  :src="imageUrl"
+	   width="100%"
+	  :height="imageHeight"
+	  ></u-image>
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+	
+	export default {
+		name:"RemoteImage",
+		mixins: [echartElementData],
+		data() {
+			return {
+				imageUrl:"",
+				windowWidth: 0, //屏幕宽度
+				imageHeight:0 //图片高度
+			};
+		},
+		computed:{
+		},
+		methods:{
+			initChart() {
+				uni.getSystemInfo({
+				    success: res=> {
+						this.windowWidth = res.windowWidth;
+						this.imageHeight = (this.windowWidth*this.elementInfo.height)/this.elementInfo.width;
+				    }
+				});
+				this.$nextTick(() => {
+					this.imageUrl = this.elementData.dataList.imageUrl
+				})
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped> 
+.remoteView {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  }
+  .remoteImage {
+    object-fit: contain;
+  }
+
+</style>

pages/index/index.vue

@@ -36,6 +36,8 @@
             <NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
 			<!-- 普通图片 -->
 			<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
+			<!-- 远程图片 -->
+			<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
 		</view>
   </view>
 </template>