使用uni-app的uni.chooseImage获取的图片路径，存储到数据库中，无法在前端展示该路径的图片

html,js,uni-app,

首先我在uni-app中使用如下方法添加图片

uni.chooseImage({
                    count: 1, //count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {

                        console.log(JSON.stringify(res.tempFilePaths));

                    }
                });

通过uni.chooseImage获取的图片路径如图所示，是“http://tmp/wx……”开头的

之后在浏览器界面，想展示该路径图片

结果如下，路径正确，但是不显示图。

原因如下：image-tools - DCloud 插件市场

uni-app、微信小程序和5+APP使用的路径不支持网络路径

解决方法：

我的做法是把路径转化为base64,这个格式的图片可以在前端展示~

1、下载插件，点击绿色的，然后打开，选择你的项目，这个真的很快（我经常担心插件安装过程麻烦，但这个真的很快）image-tools - DCloud 插件市场

之后，项目中会出现这个

2、修改uni-app中代码，先引入

import {pathToBase64} from '../../js_sdk/mmmm-image-tools/index.js'

接着修改uni.chooseImage里代码

uni.chooseImage({
                    count: 1, //count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        console.log(JSON.stringify(res.tempFilePaths));
                        //解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
                        uni.getImageInfo({
                            src: res.tempFilePaths[0],
                            success: (path) => {
                                pathToBase64(path.path).then(base64 => {
                                        console.log("base64="+base64); // 这就是转为base64格式的图片
                                    })
                                    .catch(error => {
                                        console.error(error)
                                    })
                            }
                        })

                    }
                });

输出结果如下，真的很多，从划红线的地方往后（展示不全）