Bagaimana untuk menyelesaikan masalah uniapp melintasi gambar tetapi tidak keluar?

Baru-baru ini, dalam proses membangunkan program kecil menggunakan uniapp, saya menghadapi masalah, iaitu gambar tidak dapat dipaparkan secara normal semasa merentasi gambar. Selepas beberapa penerokaan dan penyelidikan, akhirnya saya menemui penyelesaian, dan saya berkongsi dengan anda sekarang.

1. Penerangan Masalah

Dalam program kecil yang saya bangunkan, saya perlu melintasi semua gambar dalam folder dan memaparkannya pada halaman. Pertama, saya menggunakan komponen asli uniapp untuk memaparkan gambar Kod khusus adalah seperti berikut:

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

Kod ini hanya memilih gambar dari album dengan memanggil kaedah uni.chooseImage(), dan kemudian memindahkan. yang dipilih Letakkan laluan imej ke dalam tatasusunan, dan kemudian paparkan setiap imej melalui perintah v-for.

Tetapi apabila saya menjalankan program, tiada gambar dipaparkan pada halaman, jadi saya memulakan perjalanan penyelesaian masalah yang panjang.

2. Menyelesaikan masalah

1.

Pertama sekali, saya memikirkan masalah laluan imej, saya menggunakan alat penyahpepijatan uniapp untuk menyemak dan mendapati tiada masalah dengan laluan dan imej boleh dipaparkan seperti biasa dalam pratonton. kawasan alat nyahpepijat.

2. Adakah imej dimuatkan dengan betul?

Masalah kedua ialah sama ada imej dimuatkan dengan betul Kerana saya menggunakan imej tempatan, saya cuba memuat naik imej itu ke pelayan dan mendapati imej itu boleh dipaparkan seperti biasa pada pelayan, tetapi ia masih. tidak boleh dipaparkan secara tempatan.

3. Adakah ia bercanggah dengan komponen lain?

Saya mengesyaki ia adalah kerana saya menggunakan komponen lain dalam halaman yang bercanggah dengan teg tetapi saya masih tidak boleh memaparkan imej selepas saya mengulas kod komponen lain.

4. Bolehkah komponen menyemak imbas gambar yang disediakan oleh uniapp dipaparkan secara normal?

Akhirnya, saya terfikir untuk menggunakan komponen menyemak imbas imej <uni-image-preview> yang disediakan oleh uniapp untuk pratonton imej dan mendapati imej yang diberikan boleh dipaparkan seperti biasa.

Sehingga ini, saya masih belum menemui punca masalah, tetapi saya yakin ia adalah masalah dengan teg

3. Penyelesaian

Pada masa ini, saya membaca semula arahan menggunakan teg dalam dokumentasi uniapp rasmi dan menemui masalah:

uni-app Komponen asli image dilaksanakan berdasarkan komponen web H5 apabila menggunakan bekas App (termasuk HTML, img). Atribut image teg src tidak boleh disesuaikan secara langsung dengan keadaan jalan tempatan dan memerlukan pemprosesan khas:

• HBuilderX Pada halaman alat pembangunan, tetapkan mod permulaan App kepada 自定义 atau 自定义调试, Function-> Run-> Mod permulaan apl->
• Apabila menyahpepijat pada mesin sebenar, tetapkan manifest.json -> app-plus -> kepada debug dalam webview. Dengan cara ini, apabila menyahpepijat pada mesin sebenar, anda juga boleh terus menggunakan laluan tempatan untuk mengakses. true

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