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提供的圖片瀏覽元件<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啟動模式設定為自訂(debug)，現在圖片可以正常顯示了。

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

最後，經過這次排查，我明白了標籤無法直接使用本地路徑的原因，並得到了正確的解決方法，希望我的經驗可以幫助到有類似問題的同學。

以上是uniapp遍歷圖片不出來怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！