所属分类：web前端开发
在使用Uniapp开发的过程中，我们经常需要用到选择相册图片的功能，然而有时我们会遇到图片选择之后不显示的问题。在本文中，我将会阐述为什么会出现这个问题以及如何解决它。
一、为什么会出现相册图片不显示的问题？
1.权限问题
在安卓系统中，我们需要动态申请读取外部存储器的权限才能够访问相册，如果我们没有申请权限成功，那么相册里的图片将无法被读取，从而无法显示。
2.数据类型问题
在调用选择相册图片的API时，我们需要返回一个数组来装载所选的图片，但有时候在我们的代码中可能会出现数据类型不匹配的问题，导致所选的图片无法在页面上显示。
3.路径问题
相册选取的图片在传输到前端页面中需要使用图片的路径进行显示，但如果我们的路径写错或者文件名不匹配，也将导致所选的图片无法正常显示。
二、 如何解决相册图片不显示的问题？
1.检查权限问题
在选择相册图片时，我们需要申请读取外部存储器的权限，如果我们的权限申请没有成功，我们就需要进行检查。可以通过以下几个步骤来解决权限问题：
(1)在 manifest.json 文件中添加读取外部存储器权限：
微博登录
QQ登录"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项目中选择相册图片不显示怎么解决的详细内容，更多请关注zzsucai.com其它相关文章！
