Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Memaparkan Imej Secara Dinamik dalam Vue.js dengan Hartanah Berkomputer dan Webpack?

Bagaimana untuk Memaparkan Imej Secara Dinamik dalam Vue.js dengan Hartanah Berkomputer dan Webpack?

Barbara Streisand
Barbara Streisandasal
2024-11-12 21:34:02834semak imbas

How to Dynamically Display Images in Vue.js with Computed Properties and Webpack?

Paparan Imej Dinamik dalam Vue.js Menggunakan Pek Web

Dalam aplikasi Vue.js yang menggunakan pek web, anda mungkin menghadapi cabaran apabila mencuba secara dinamik paparan imej yang nama failnya disimpan dalam sifat yang dikira. Khususnya, jika sifat ini bergantung pada pembolehubah kedai Vuex yang dihuni secara tidak segerak, anda mungkin melihat bahawa laluan imej tidak diselesaikan dengan betul.

Pertimbangkan templat Vue berikut:

<div class="col-lg-2" v-for="pic in pics">
  <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

Sementara pendekatan ini berfungsi dengan sempurna apabila laluan imej statik disediakan (cth., Bagaimana untuk Memaparkan Imej Secara Dinamik dalam Vue.js dengan Hartanah Berkomputer dan Webpack?), ia gagal memaparkan imej apabila laluan dijana secara dinamik daripada harta yang dikira. Isu yang sama telah dilaporkan dan diselesaikan dalam biola ini.

Untuk menyelesaikan isu ini, anda boleh menggunakan kod JavaScript berikut:

getImgUrl(pet) {
  var images = require.context('../assets/', false, /\.png$/)
  return images('./' + pet + ".png")
}

Fungsi ini menggunakan require.context() webpack secara dinamik muatkan imej daripada direktori tertentu berdasarkan nama fail yang disediakan.

Dalam templat HTML, atribut v-bind:src hendaklah dikemas kini untuk merujuk fungsi getImgUrl() dan bukannya menjana laluan terus:

<div class="col-lg-2" v-for="pic in pics">
  <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Dengan melaksanakan penyelesaian ini, anda boleh memaparkan imej secara dinamik dalam aplikasi Vue.js anda dengan webpack, walaupun nama fail imej disimpan dalam sifat yang dikira.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Imej Secara Dinamik dalam Vue.js dengan Hartanah Berkomputer dan Webpack?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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