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编码等。希望我的经验可以帮助到那些遇到类似问题的开发者。

以上是uniapp返回图片不显示怎么办的详细内容。更多信息请关注PHP中文网其他相关文章！