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 中国語 Web サイトの他の関連記事を参照してください。