uniapp專案中選擇相簿圖片不顯示怎麼解決

在使用Uniapp開發的過程中，我們經常需要用到選擇相簿圖片的功能，然而有時我們會遇到圖片選擇之後不顯示的問題。在本文中，我將會闡述為什麼會出現這個問題以及如何解決它。

一、為什麼會出現相簿圖片不顯示的問題？

1.權限問題

在安卓系統中，我們需要動態申請讀取外部記憶體的權限才能夠存取相冊，如果我們沒有申請權限成功，那麼相簿裡的圖片將無法被讀取，從而無法顯示。

2.資料類型問題

在呼叫選擇相簿圖片的API時，我們需要傳回一個陣列來裝載所選的圖片，但有時候在我們的程式碼中可能會出現數據類型不符的問題，導致所選的圖片無法在頁面上顯示。

3.路徑問題

相簿選取的圖片在傳輸到前端頁面中需要使用圖片的路徑進行顯示，但如果我們的路徑寫錯或檔案名稱不匹配，也會導致所選的圖片無法正常顯示。

二、 如何解決相簿圖片不顯示的問題？

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中文網其他相關文章！