-
背景
在使用 uni.previewImage 预览 base64 流的图片的情况下,只能在 H5 实现预览,在 APP 上打开后会呈现黑屏并一直转圈。参阅了网上资料后,有效的方法思路如下:先将 base64 转为临时路径,再通过 uni.previewImage 来进行预览。 -
实现
1)到插件市场下载 image-tools 到项目里(或直接 npm 下载)
npm i image-tools --save
2)完整示例
<template>
<view>
<image :src="base64Src" @click="previewImg"></image>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from 'image-tools'
export default {
data() {
return {
// base64Src 图片流, 格式如:“data:image/jpg;base64,xxxxx”
base64Src: ''
}
},
methods: {
previewImg() {
let that = this;
uni.showLoading({
title: "加载中..."
})
base64ToPath(base64Src)
.then(path => {
let imgs = [];
uni.hideLoading()
imgs[0] = path;
uni.previewImage({
current: 0,
urls: imgs
});
})
.catch(error => {
// 图片加载失败
uni.hideLoading()
})
}
}
}
</script>