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

关注

最新推荐文章于 2026-08-14 23:45:00 发布 · 2.1k 阅读

转载 ·

本内容遵循 CC 4.0 BY-SA 版权协议

原文链接：https://blog.csdn.net/weixin_42678675/article/details/121492438

别再踩坑了！uni-app微信小程序图片引入的三种正确姿势（含image、background-image和预览）本文详细解析了uni-app微信小程序中图片引入的三种正确方式，包括image标签、background-image和预览功能，并提供了实战验证的避坑技巧。特别针对真机与开发工具差异、路径解析规则和动态绑定限制等常见问题，给出了高效解决方案，帮助开发者提升开发效率和用户体验。阅读详情

背景
在使用 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>

收录于