因为小程序中使用腾讯云cos,所有头像需要异步获取,所以computed计算也需要异步
因为头像有两种,一种是完整的网址的 ,一种是通过key换取网址的,所以需要做一个判断,判断图片是网址还是key,根据src中是否包含http来进行判断。
根据参数判断是否是当前用户头像,如果是且头像无法加载则显示微信小程序默认头像
<template>
<u--image v-if="imgSrc" shape="circle" :width="size+'rpx'" :height="size+'rpx'" :src="imgSrc">
<div v-if="whetherCurrentUser" class="userAvatars" slot="error">
<u-avatar shape="circle" :size="size/2" mp-avatar
fontSize="24"></u-avatar>
</div>
<u-avatar v-else :size="size/2" slot="error" icon="account-fill" fontSize="24" randomBgColor>
</u-avatar>
</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 {
configs
}
},
components: {},
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
}
},
props: {
size: {
type: Number,
default () {
return 44;
}
},
whetherCurrentUser: {
type: Boolean,
default () {
return false;
}
},
src: {
type: String,
default () {
return '';
}
},
},
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">
.userAvatars {
border-radius: 50%;
overflow: hidden;
}
</style>