<template>
<view class="attachments">
<image @click="previewImg([imgSrc],0)" class="attachmentsicon" :src="imgSrc" mode=""></image>
</view>
</template>
<script>
import {
CommandGetImgByName
} from '@/config/api.js'
export default {
data() {
return {}
},
asyncComputed: {
async imgSrc() {
var data = 'data:image/png;base64,' + await this.GetImgByName()
console.log(data)
return data
}
},
props: {
show: {
type: Boolean,
default () {
return true
}
},
index: {
type: Number,
default () {
return 0
}
},
item: {
type: Object,
default () {
return {
AttachmentName: '',
AttachmentPath: '',
FileType: '',
Sort: 0,
ThumbnailPath: '',
Remarks: ''
}
}
}
},
methods: {
previewImg(imgUrlList, index) {
let _this = this;
// #ifdef MP
uni.previewImage({
current: index - 1,
urls: imgUrlList,
indicator: 'number',
loop: true
});
// #endif
// #ifndef MP
uni.previewImage({
current: index - 1,
urls: imgUrlList,
indicator: 'number',
loop: true
});
// #endif
},
async GetImgByName() {
var that = this;
var data = ''
await CommandGetImgByName({
params: {
filename: that.item.AttachmentPath
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
data = res.Data.FileData
}
}).catch(err => {
})
return data
},
}
}
</script>
<style scoped lang="scss">
.attachments {
width: 148rpx;
height: 148rpx;
background: rgba(#A1A8B3, 0.1);
border-radius: 8rpx;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.attachmentsicon {
width: 148rpx;
height: 148rpx;
}
text {
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9DB5;
margin-top: 14rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100rpx;
}
}
</style>
使用
<ximage :item="item"></ximage>
Computed异步获取
Computed异步获取
大图预览
uniapp 大图预览