uniapp遍历图片不出来怎么解决

百变鹏仔 4周前 (11-20) #uniapp

文章标签遍历

最近我在使用uniapp开发一个小程序的过程中，遇到了一个问题，就是遍历图片的时候图片无法正常显示。经过一番探索和研究，我最终找到了解决方法，现在和大家分享一下。

一、问题描述

我开发的小程序中需要遍历一个文件夹中的所有图片并将它们显示在页面上。首先我使用了uniapp的原生组件来显示图片，具体代码如下：

<template>  <view>    <image v-for="(item, index) in imageList" :src="item.path" :key="index"></image>  </view></template><script>export default {  data() {    return {      imageList: [] // 图片列表    }  },  methods: {    async getImageList() {      const { tempFilePaths } = await uni.chooseImage({ // 从相册中选择图片        count: 9,        sizeType: ['original', 'compressed'],        sourceType: ['album'],      })      for (let i = 0; i < tempFilePaths.length; i++) {        this.imageList.push({          path: tempFilePaths[i],        })      }    }  },  mounted() {    this.getImageList()  }}</script>

这段代码简单地通过调用uni.chooseImage()方法从相册中选择图片，然后将选中的图片路径放到一个数组中，再通过v-for指令将每张图片展示出来。

可是当我运行程序时，页面上并没有显示任何图片，于是我就开始了漫长的排查之旅。

二、排查问题

1.图片路径是否正确？

首先我就想到了图片路径的问题，我使用了uniapp的调试工具进行了检查，发现路径并没有问题，而且在调试工具的预览区域中图片是可以正常显示的。

2.图片是否正确加载？

第二个问题是图片是否正确加载，因为我使用的是本地图片，所以我试图将图片上传到了服务器上，发现图片在服务器上可以正常显示，但在本地依旧无法显示。

3.与其他组件是否冲突？

我怀疑是因为我在页面中使用了其他组件与标签产生了冲突，但我注释掉其他组件的代码后依旧无法显示图片。

4.使用uniapp提供的图片浏览组件是否能正常显示？

最后我想到了使用uniapp提供的图片浏览组件来预览图片，结果发现渲染出来的图片是可以正常显示的。

到这里为止，我还是没有找到问题的根源，但也确信了这是标签的问题。

三、解决方案

这时我重新阅读了uniapp官方文档关于使用标签的说明，发现了问题所在：

uni-app 原生组件 image 在使用 web 容器（包括 H5、App）的时候是基于 HTML img 组件实现的。 image 标签的 src 属性，无法直接适配本地路劲，需要特殊处理：HBuilderX 开发工具页面，将 App 启动模式设置为自定义或自定义调试，功能 -> 运行 -> App启动模式 -> 自定义(debug)` ，然后就和浏览器一样，本地路径、网络路径均可使用。真机调试时，在 manifest.json 中设置 app-plus -> debug -> webview 为 true。这样在真机上调试时，也可以直接使用本地路径访问。

通过这段说明，我明白了原来是因为标签使用了HTML中的img组件，在uniapp中不支持直接使用本地路径，而需要进行特殊处理。

于是我采用HBuilderX开发工具页面将App启动模式设置为自定义(debug)，现在图片可以正常显示了。

<template>  <view>    <image v-for="(item, index) in imageList" :src="'/' + item.path" :key="index"></image>  </view></template><script>export default {  data() {    return {      imageList: [] // 图片列表    }  },  methods: {    async getImageList() {      const { tempFilePaths } = await uni.chooseImage({ // 从相册中选择图片        count: 9,        sizeType: ['original', 'compressed'],        sourceType: ['album'],      })      for (let i = 0; i < tempFilePaths.length; i++) {        this.imageList.push({          path: tempFilePaths[i],        })      }    }  },  mounted() {    this.getImageList()  }}</script>

最后，经过这次排查，我明白了标签无法直接使用本地路径的原因，并得到了正确的解决方法，希望我的经验可以帮助到有类似问题的同学。

文章推荐

uniapp遍历图片不出来怎么解决

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

什么是uni-app

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

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

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