Bagaimana untuk Memaparkan Imej Secara Dinamik dalam Vue.js dengan Hartanah Berkomputer dan 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 src="/static/imghw/default1.png" data-src="getImgUrl(pic)" class="lazy" v-bind:.. pic v-bind:alt="pic">
</div>

Sementara pendekatan ini berfungsi dengan sempurna apabila laluan imej statik disediakan (cth., ), 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="/static/imghw/default1.png" data-src="getImgUrl(pic)" class="lazy" : 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!