Comment résoudre le problème de la traversée des images par Uniapp mais sans en sortir ?

Récemment, lorsque je développais un petit programme utilisant uniapp, j'ai rencontré un problème, c'est-à-dire que lors du parcours d'images, les images ne pouvaient pas s'afficher normalement. Après quelques explorations et recherches, j'ai finalement trouvé une solution et je la partage avec vous maintenant.

1. Description du problème

Dans le petit programme que j'ai développé, je dois parcourir toutes les images d'un dossier et les afficher sur la page. Tout d'abord, j'ai utilisé le composant natif d'uniapp pour afficher les images. Le code spécifique est le suivant :

<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>

Ce code sélectionne simplement les images de l'album en appelant la méthode uni.chooseImage(), puis placez le chemin de l'image sélectionné dans un tableau, puis affichez chaque image via la commande v-for. uni.chooseImage()方法从相册中选择图片，然后将选中的图片路径放到一个数组中，再通过v-for指令将每张图片展示出来。

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

二、排查问题

1.图片路径是否正确？

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

2.图片是否正确加载？

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

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

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

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

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

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

三、解决方案

这时我重新阅读了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

Mais lorsque j'ai exécuté le programme, aucune image n'était affichée sur la page, j'ai donc commencé un long voyage de dépannage.

2. Dépannage🎜🎜1. Le chemin de l'image est-il correct ? 🎜🎜Tout d'abord, j'ai réfléchi au problème du chemin de l'image. J'ai utilisé l'outil de débogage d'uniapp pour vérifier et j'ai constaté qu'il n'y avait aucun problème avec le chemin et que l'image pouvait être affichée normalement dans la zone d'aperçu de ​​l'outil de débogage. 🎜🎜2. Les images sont-elles chargées correctement ? 🎜🎜Le deuxième problème est de savoir si l'image est chargée correctement. Comme j'utilise une image locale, j'ai essayé de télécharger l'image sur le serveur et j'ai constaté que l'image peut être affichée normalement sur le serveur, mais elle ne peut toujours pas être affichée localement. . 🎜🎜3. Est-il en conflit avec d'autres composants ? 🎜🎜Je suppose que c'est parce que j'utilise d'autres composants dans la page qui sont en conflit avec la balise , mais après avoir commenté le code des autres composants, l'image ne peut toujours pas être affichée. 🎜🎜4. Le composant de navigation d'images fourni par uniapp peut-il s'afficher normalement ? 🎜🎜Enfin, j'ai pensé à utiliser le composant de navigation d'images <uni-image-preview> fourni par uniapp pour prévisualiser l'image, et j'ai constaté que l'image rendue pouvait être affichée normalement. 🎜🎜Jusqu'à présent, je n'ai toujours pas trouvé la source du problème, mais je suis convaincu qu'il s'agit d'un problème avec la balise 🎜🎜3. Solution🎜🎜À ce moment, j'ai relu les instructions d'utilisation de la balise dans le document officiel d'uniapp et j'ai trouvé le problème : 🎜

🎜uni-app Le composant natif image est basé sur HTML lors de l'utilisation de conteneurs web (y compris H5, App code>) Implémenté par le composant <code>img. L'attribut src de la balise image ne peut pas être directement adapté au chemin local et nécessite un traitement particulier : 🎜

• HBuilderX Développement Page Outils , définissez le mode de démarrage de l'Application sur Personnalisé ou Débogage personnalisé, Fonction-> Exécuter-> Define (debug)`, puis tout comme le navigateur, les chemins locaux et les chemins réseau peuvent être utilisés.
• Lors du débogage sur une machine réelle, définissez app-plus dans manifest.json -> webview est true. De cette façon, lors du débogage sur une machine réelle, vous pouvez également utiliser directement le chemin d'accès local.

🎜Grâce à cette explication, je comprends que c'est parce que la balise utilise le composant img dans HTML , l'utilisation directe des chemins locaux n'est pas prise en charge dans uniapp et un traitement spécial est requis. 🎜🎜J'ai donc utilisé la page de l'outil de développement HBuilderX pour définir le mode de démarrage de l'App sur personnalisé (débogage), et maintenant les images peuvent être affichées normalement. 🎜

<template>
  <view>
    <image v-for="(item, index) in imageList" :src="&#39;/&#39; + 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>

🎜Enfin, après ce dépannage, j'ai compris la raison pour laquelle la balise ne peut pas utiliser directement le chemin local, et j'ai obtenu la bonne solution. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!