uniapp에서 반환한 이미지가 표시되지 않으면 어떻게 해야 하나요?

최근 uniapp을 사용하여 모바일 애플리케이션을 개발할 때 반환된 이미지가 표시되지 않는 문제가 발생했습니다. 오늘은 제가 이 문제를 어떻게 해결했는지 알려드리겠습니다.

먼저 유니앱에 대해 간략하게 소개하고 싶습니다. 이는 HTML, CSS 및 JavaScript를 사용하여 iOS 및 Android 애플리케이션을 구축할 수 있는 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 프레임워크입니다. 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 구성 요소의 데이터 속성에 저장합니다. 수정된 코드는 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!