【uniapp】解决 uni.previewImage 不支持Base64的图片在APP上预览的问题

1. 背景

  在使用 uni.previewImage 预览 base64 流的图片的情况下，只能在 H5 实现预览，在 APP 上打开后会呈现黑屏并一直转圈。参阅了网上资料后，有效的方法思路如下：先将 base64 转为临时路径，再通过 uni.previewImage 来进行预览。

2. 实现

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>