How to solve the problem of uniapp traversing pictures but not coming out?

Recently, when I was developing a small program using uniapp, I encountered a problem, that is, the pictures could not be displayed normally when traversing the pictures. After some exploration and research, I finally found a solution, and I'm sharing it with you now.

1. Problem description

In the small program I developed, I need to traverse all the pictures in a folder and display them on the page. First, I used uniapp's native component to display pictures. The specific code is as follows:

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

This code simply selects from the album by calling the uni.chooseImage() method Picture, then put the selected picture path into an array, and then display each picture through the v-for command.

But when I ran the program, no pictures were displayed on the page, so I started a long troubleshooting journey.

2. Troubleshooting

1. Is the image path correct?

First of all, I thought about the problem of the image path. I used the debugging tool of uniapp to check and found that there was no problem with the path, and the image could be displayed normally in the preview area of ​​the debugging tool.

2. Are the images loaded correctly?

The second question is whether the image is loaded correctly. Because I am using a local image, I tried to upload the image to the server and found that the image can be displayed normally on the server, but it still cannot be displayed locally.

3. Does it conflict with other components?

I suspect that it is because I use other components in the page that conflict with the tag, but after I comment out the code of other components, the image still cannot be displayed.

4. Can the picture browsing component provided by uniapp be displayed normally?

Finally I thought of using the image browsing component provided by uniapp<uni-image-preview> to preview the image, and found that the rendered image could be displayed normally.

Up to this point, I still haven’t found the source of the problem, but I am convinced that it is a problem with the tag.

3. Solution

At this time, I re-read the instructions on using the tag in the official uniapp documentation and discovered the problem:

uni-app Native components image are based on # when using web containers (including H5, App) ##HTML img Implemented by component. The src attribute of the image tag cannot be directly adapted to the local path and requires special processing:

• HBuilderX development tool page, Set the App startup mode to Custom or Customized debugging, Function-> Run-> App startup mode-> Custom (debug) ` , then just like the browser, both local paths and network paths can be used.
When debugging on a real machine, set
• app-plus in manifest.json -> debug -> webview is true. In this way, when debugging on a real machine, you can also directly use the local path to access.

Through this explanation, I understand that it is because the tag uses the

img component in HTML, in # Direct use of local paths is not supported in ##uniapp and requires special processing. So I used the

HBuilderX

development tools page to set the App startup mode to custom (debug), and now the pictures can be displayed normally. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template&gt;   &lt;view&gt;     &lt;image v-for=&quot;(item, index) in imageList&quot; :src=&quot;&amp;#39;/&amp;#39; + item.path&quot; :key=&quot;index&quot;&gt;&lt;/image&gt;   &lt;/view&gt; &lt;/template&gt; &lt;script&gt; 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 &lt; tempFilePaths.length; i++) { this.imageList.push({ path: tempFilePaths[i], }) } } }, mounted() { this.getImageList() } } &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div>Finally, after this investigation, I understood the reason why the tag cannot directly use the local path, and got the correct solution. I hope my experience can help students with similar problems. .

The above is the detailed content of How to solve the problem of uniapp traversing pictures but not coming out?. For more information, please follow other related articles on the PHP Chinese website!