Cara menghantar alamat imej uniapp kepada VIEW

Dalam proses membangunkan aplikasi menggunakan Uniapp, kami selalunya perlu memaparkan imej pada halaman. Banyak kali, kita perlu mendapatkan alamat imej melalui antara muka dan kemudian memaparkannya pada halaman. Jadi, bagaimana untuk menghantar alamat imej kepada LIHAT? Artikel ini akan memperkenalkannya kepada anda secara terperinci.

1. Gunakan teg img

Dalam Uniapp, anda boleh menggunakan teg img HTML untuk memaparkan imej. Anda boleh menggunakan kod berikut dalam templat:

<img :src="imageUrl" />

di mana imageUrl ialah alamat imej. Dalam Vue, anda boleh menghantar data dengan mengikat pembolehubah.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg"
    }
  }
}
</script>

Dengan mengikat imageUrl dalam data, ia boleh dihantar dengan mudah.

2. Gunakan imej latar belakang

Selain menggunakan teg img, anda juga boleh menggunakan imej latar belakang CSS untuk menetapkan imej latar belakang. Kelebihan kaedah ini ialah anda boleh menetapkan kedudukan, saiz dan gaya lain gambar, memberikan anda kebebasan yang lebih besar. Gunakan kod berikut dalam templat:

<div :style="{ backgroundImage: &#39;url(&#39; + imageUrl + &#39;)&#39; }"></div>

Antaranya, imageUrl juga merupakan alamat imej. Pengikatan juga boleh dihantar melalui data dalam Vue.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg"
    }
  }
}
</script>

3. Gunakan komponen imej uni

Selain itu, Uniapp juga menyediakan komponen imej uni untuk memaparkan gambar. Menggunakan komponen imej-uni, anda juga boleh menetapkan imej pemegang tempat untuk memuatkan imej dan ralat. Gunakan kod berikut dalam templat:

<uni-image :src="imageUrl" :loading-src="loadingImage" :error-src="errorImage"></uni-image>

Antaranya, imageUrl juga merupakan alamat imej. loadingImage dan errorImage ialah imej pemegang tempat semasa pemuatan dan ralat masing-masing. Pengikatan juga boleh dihantar melalui data dalam Vue.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg",
      loadingImage: "http://www.image.com/loading.png",
      errorImage: "http://www.image.com/error.png"
    }
  }
}
</script>

Di atas adalah cara untuk menghantar alamat imej untuk LIHAT dalam uniapp Anda boleh memilih mengikut situasi sebenar. Jika anda hanya mahu memaparkan imej, anda boleh menggunakan teg img atau imej latar belakang jika anda perlu menetapkan imej pemegang tempat semasa memuatkan dan ralat, anda boleh menggunakan komponen imej-uni.

Atas ialah kandungan terperinci Cara menghantar alamat imej uniapp kepada VIEW. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!