uniappプロジェクトで選択したアルバム写真が表示されない問題の解決方法

Uniappを使って開発をしていると、アルバムの写真を選択する機能を使うことが多いのですが、選択しても写真が表示されないという問題に遭遇することがあります。この記事では、この問題が発生する原因と解決方法について説明します。

1. アルバム写真が表示されないのはなぜですか?

1. 権限の問題

Android システムでは、アルバムにアクセスする前に、外部ストレージの読み取り権限を動的に申請する必要があります。権限の申請が正常に行われない場合、アルバム内の写真はフォト アルバムにアクセスできなくなり、読み取られて表示できなくなります。

2. データ型の問題

アルバムの写真を選択するために API を呼び出すとき、選択した写真をロードするために配列を返す必要がありますが、コード内にデータが表示される場合があります。型の不一致の問題選択した画像がページに表示されないようにします。

3. パスの問題

アルバムで選択した画像は、フロントエンド ページに転送されるときに画像のパスを使用して表示される必要がありますが、パスが正しく書かれていなかったり、ファイル名が一致しないと、選択した画像が正しく表示されなくなります。

2. アルバムの写真が表示されない問題を解決するにはどうすればよいですか?

1. 権限の問題を確認する

アルバム画像を選択する際、外部ストレージへの読み取り権限を申請する必要があり、許可申請が失敗した場合は確認する必要があります。権限の問題は、次の手順で解決できます。

(1) 外部ストレージを読み取るための権限を、manifest.json ファイルに追加します。

"android": {
    "permission": [
      "android.permission.READ_EXTERNAL_STORAGE"
    ]
  }

(2)アルバム画像を選択する機能 ページ内で、uni.requestAuthorize メソッドを使用して許可を申請します:

uni.requestAuthorize({
    scope: 'scope.writePhotosAlbum',
    success() {
        console.log('授权成功')
    },
    fail() {
        console.log('授权失败')
    }
})

2. データ型の問題を確認してください

データ型が一致しない場合、選択したページ上に画像が正常に表示されません。次の例のように、コードで使用されるデータ型に注意する必要があります。

data() {
    return {
       imgList: [],
    }
},
methods: {
    chooseImage(){
        uni.chooseImage({
            count: 3,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                this.imgList = res.tempFilePaths; // 选择图片成功后将图片路径存入imgList数组
            }
        })
    }
}

上記のコードでは、選択した画像の一時パスを imgList 配列に保存します。選択した画像は次の方法で選択できます:

<view>
    <image v-for="(item,index) in imgList" :src="item"></image>
</view>

上記のコードでは、v-for を使用して imgList 配列内の各要素を走査し、:image タグを使用してページ上に画像を表示します。

3. パスの問題を確認する

画像を表示する際には正しいパスを参照する必要があるため、画像のパスが正しいかどうか、スペルミスがないかを注意深く確認する必要があります。などの問題があります。通常、画像を選択した後に返されるのは一時的なパスですが、画像を表示する場合はローカル パスを使用する必要があります。次のメソッドを通じてローカル パスを取得できます。

let realPath = '';
uni.getFileSystemManager().access({
        path: tempFilePaths,
        success() {
            realPath = wx.env.USER_DATA_PATH + '/' + new Date().getTime() + '.png'; //使用 wx.env.USER_DATA_PATH 获取本地存储路径
            uni.getFileSystemManager().saveFile({
                tempFilePath: tempFilePaths, // 临时文件地址
                filePath: realPath,
                success: (res) => {
                        console.log('保存图片到本地成功:' + res.savedFilePath)
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },
        fail() {
            console.log('访问失败')
        }
});

上記のメソッドを通じて、選択した画像をローカルに保存し、保存に成功した後にコールバック関数を呼び出してパスを取得して表示できます。

概要

アルバムの写真が表示されないことは、Uniapp 開発プロセスを使用するときによく発生する問題です。通常、この問題は、不正な権限、データ型、パスなどが原因で発生します。この問題は、権限、データ型、パスを確認することで解決できます。この記事が皆さんのお役に立ち、Uniapp の開発プロセスがよりスムーズになることを願っています。

以上がuniappプロジェクトで選択したアルバム写真が表示されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。