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