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中文网其他相关文章！