uniapp uview u--image 二次封装

uniapp yekong

uniapp开发,图片处理交给图片组件

<template>
	<u--image lazyLoad="true" :fade="true" duration="450" :width="width" :height="height" :src="imgSrc">
		<view slot="error" style="font-size: 24rpx;">加载失败</view>
	</u--image>
</template>

<script>
	import configs from '@/config/config.js'
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	export default {
		data() {
			return {
				show: false,
				configs
			}
		},
		props: {
			width: {
				type: Number,
				default () {
					return 178.5;
				}
			},
			height: {
				type: Number,
				default () {
					return 178.5;
				}
			},
			src: {
				type: String,
				default () {
					return '';
				}
			},
		},
		onShow() {

		},
		asyncComputed: {
			async imgSrc() {
				var imgSrc = ""
				var str = new RegExp("http");
				console.log(str.test(this.src))
				if (str.test(this.src)) {
					imgSrc = this.src
				} else {
					imgSrc = await this.eventHandler()
				}
				return imgSrc
			}
		},
		methods: {
			async eventHandler() {
				try {
					var that = this;
					const url = await getFileAccessUrl(this.src); // 返回的url即前面上传到COS的图片的访问地址(包含临时签名)
					return url
				} catch (error) {
					console.log(error);
				}
			},
		}
	}
</script>

<style scoped lang="scss">
</style>

<getimage :src="item.img" :width="178.5" :height="178.5"></getimage>
喜欢