Bagaimanakah saya boleh memaparkan imej secara dinamik dalam aplikasi Vue.js dan Webpack saya?

Rendering Imej Dinamik dalam Vue.js dengan Webpack

Dalam aplikasi Vue.js dan webpack, anda mungkin menghadapi situasi di mana anda perlu memaparkan imej secara dinamik berdasarkan pembolehubah . Walau bagaimanapun, jika anda menghadapi isu di mana imej dinamik tidak dipaparkan dengan betul, adalah penting untuk membetulkan masalah yang mendasarinya.

Satu contoh isu ini sering timbul ialah apabila anda menyimpan nama fail imej dalam sifat yang dikira yang mendapatkan semula pembolehubah kedai Vuex yang dihuni secara tidak segerak pada beforeMount. Menggunakan arahan v-bind:src, anda berhasrat untuk menggabungkan nama fail dinamik dengan laluan aset statik untuk mencipta sumber imej. Walau bagaimanapun, pendekatan ini mungkin tidak selalu menghasilkan hasil yang diingini.

Sebaliknya, penyelesaian yang lebih mantap ialah memanfaatkan kaedah require.context() webpack. Kaedah ini membolehkan anda mengakses fail daripada direktori tertentu berdasarkan ungkapan biasa yang disediakan. Contohnya, anda boleh menggunakan kaedah ini untuk mendapatkan semua fail .png daripada direktori aset.

Untuk melaksanakan penyelesaian ini, tentukan kaedah dalam komponen Vue.js anda yang menerima nama fail imej sebagai hujah. Dalam kaedah ini, gunakan require.context untuk mendapatkan semula laluan imej dan mengembalikannya. Dalam templat HTML anda, ikat atribut src teg img pada kaedah ini.

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

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

Dengan menggunakan kaedah require.context bersama-sama dengan kaedah dinamik anda, anda boleh menyelesaikan isu dengan berkesan pemaparan imej dinamik dalam aplikasi Vue.js dan webpack anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan imej secara dinamik dalam aplikasi Vue.js dan Webpack saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!