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>