微信小程序联调

uni_modules/uni-id-pages/components/cloud-image/cloud-image.vue

@@ -1,6 +1,6 @@
 <template>
-	<view @click="onClick" :style="{width,height}" style="justify-content: center;">
-		<image v-if="cSrc" :style="{width,height}" :src="cSrc" :mode="mode"></image>
+	<view @click="onClick" :style="{width,height}" class="cloud-image-box">
+		<image v-if="cSrc" :style="{width,height}" :src="cSrc" :mode="mode" @error="onImageError"></image>
 	</view>
 </template>
 
@@ -8,20 +8,21 @@
 	/**
 	* cloud-image 
 	* @description 兼容普通资源和unicloud图片资源渲染的组件
-	* @property {String} mode	图片裁剪、缩放的模式。默认为widthFix，支持所有image组件的mode值
+	* @property {String} mode	图片裁剪、缩放的模式。默认为 aspectFill（适合头像），支持所有 image 的 mode
 	* @property {String} src	资源完了链接或uniCloud云存储资源的fileid
 	* @property {String} width	图片的宽，默认为：100rpx
 	* @property {String} height	图片的高，默认为：100rpx
 	* @event {Function} click 点击 cloud-image 触发事件
+	* @event {Function} load-error 临时链接获取失败或图片加载失败
 	*/
 	export default {
 		name: "cloud-image",
-		emits:['click'],
+		emits:['click', 'load-error'],
 		props: {
 			mode: {
 				type:String,
 				default () {
-					return 'widthFix'
+					return 'aspectFill'
 				}
 			},
 			src: {
@@ -46,14 +47,29 @@
 		watch: {
 			src:{
 				handler(src) {
-					if (src&&src.substring(0, 8) == "cloud://") {
+					this.cSrc = ''
+					if (!src || typeof src !== 'string') {
+						return
+					}
+					const s = src.trim()
+					if (!s) {
+						return
+					}
+					if (s.substring(0, 8) === 'cloud://') {
 						uniCloud.getTempFileURL({
-							fileList: [src]
-						}).then(res=>{
-							this.cSrc = res.fileList[0].tempFileURL
+							fileList: [s]
+						}).then((res) => {
+							const url = res && res.fileList && res.fileList[0] && res.fileList[0].tempFileURL
+							if (url) {
+								this.cSrc = url
+							} else {
+								this.$emit('load-error')
+							}
+						}).catch(() => {
+							this.$emit('load-error')
 						})
-					}else{
-						this.cSrc = src
+					} else {
+						this.cSrc = s
 					}
 				},
 				immediate: true
@@ -62,12 +78,25 @@
 		methods:{
 			onClick(){
 				this.$emit('click')
+			},
+			onImageError() {
+				this.cSrc = ''
+				this.$emit('load-error')
 			}
 		},
 		data() {
 			return {
-				cSrc:false
+				cSrc: ''
 			};
 		}
 	}
-</script>
+</script>
+
+<style scoped>
+	.cloud-image-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+	}
+</style>