uniapp返回图片不显示怎么办

最近在使用uniapp开发移动应用时，遇到了一个问题：返回的图片不显示。今天在这里，我将和大家分享一下我是如何解决这个问题的。

首先，我想简单介绍一下uniapp。它是一款基于Vue.js框架的跨平台应用开发框架，可以使用HTML、CSS和JavaScript来构建iOS和Android应用程序。使用uniapp可以让我们只编写一次代码，即可在多个平台上运行，而不需要为每个平台单独开发。

回到正题，当我在应用程序中打开相机或图库选择照片时，图片从相机或图库返回到应用程序，但是它并没有在应用程序中显示出来。我检查了代码并没有找到错误，因此我决定检查一下图片的路径是否正确，因为如果图片路径不正确，图片也无法显示。

检查图片路径时，我发现问题出在了图片的地址上。在uniapp中，我们一般使用base64编码来显示图片，而在我这个应用程序中，我没有使用base64编码，而是使用了图片的真实路径。这就是为什么图片无法正常显示的原因。

要解决这个问题，我需要修改代码以使用base64编码。在Vue.js中，我们可以使用btoa（）方法将文件转换为base64编码。以下是我修改后的代码：

getLocalImgUrl: function (file) {  return new Promise((resolve) => {    var reader = new FileReader();    reader.onloadend = function () {      resolve(reader.result);    }    reader.readAsDataURL(file);  })},

这个函数将文件转换为base64编码，并将base64编码的结果作为字符串返回。在我选择照片后，调用这个函数并将返回的base64编码存储在Vue.js组件的data属性中。以下是修改后的代码：

chooseImage: function () {  var that = this;  uni.chooseImage({    count: 1,    success: function (res) {      that.getLocalImgUrl(res.tempFiles[0]).then((result) => {        that.localImage = result; // 将base64编码的字符串存储在data属性中      });    }  });},

现在，当我选择照片并返回应用程序时，图片成功地显示在了应用程序中。这个问题已经得到解决。

总结一下，uniapp是一款非常实用的跨平台应用开发框架。要成功开发应用程序，我们需要仔细检查代码并确保图片路径正确、使用base64编码等。希望我的经验可以帮助到那些遇到类似问题的开发者。