What should I do if the image returned by uniapp is not displayed?

Recently, when using uniapp to develop mobile applications, I encountered a problem: the returned images were not displayed. Here today, I will share with you how I solved this problem.

First of all, I would like to briefly introduce uniapp. It is a cross-platform application development framework based on the Vue.js framework, which can use HTML, CSS and JavaScript to build iOS and Android applications. Using uniapp allows us to write code once and run it on multiple platforms without having to develop it separately for each platform.

Back to topic, when I open the camera or gallery in the app to select a photo, the picture is returned to the app from the camera or gallery, but it does not show up in the app. I checked the code and found no errors, so I decided to check if the path to the image was correct, because if the path to the image was incorrect, the image would not be displayed.

When checking the image path, I found that the problem lies in the address of the image. In uniapp, we generally use base64 encoding to display images, but in my application, I did not use base64 encoding, but used the real path of the image. That's why the picture doesn't display properly.

To solve this problem, I need to modify the code to use base64 encoding. In Vue.js, we can use the btoa() method to convert files to base64 encoding. The following is my modified code:

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

This function converts the file to base64 encoding and returns the base64 encoded result as a string. After I select the photo, I call this function and store the returned base64 encoding in the Vue.js component's data property. Here is the modified code:

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

Now when I select the photo and return to the app, the image is successfully displayed in the app. This issue has been resolved.

To summarize, uniapp is a very practical cross-platform application development framework. To successfully develop an application, we need to double-check the code and ensure that image paths are correct, base64 encoding is used, etc. I hope my experience can help developers who encounter similar problems.

The above is the detailed content of What should I do if the image returned by uniapp is not displayed?. For more information, please follow other related articles on the PHP Chinese website!