Rumah > hujung hadapan web > uni-app > teks badan

Cara menghantar alamat imej uniapp kepada VIEW

PHPz
Lepaskan: 2023-04-18 15:49:28
asal
1197 orang telah melayarinya

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" />
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan