uniapp项目中选择相册图片不显示怎么解决

百变鹏仔 4周前 (11-20) #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项目中选择相册图片不显示怎么解决

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项