Bagaimana untuk Memaparkan Imej Dinamik dalam Vue.js dengan Webpack?

Memaparkan Imej Dinamik dalam Vue.js dengan Webpack

Dalam aplikasi web Vue.js yang dibina dengan webpack, memaparkan imej dinamik boleh menjadi keperluan biasa. Walau bagaimanapun, menghadapi masalah dengan fungsi ini boleh mengecewakan. Mari kita mendalami senario tertentu dan teroka penyelesaian.

Masalahnya

Dalam coretan kod yang disediakan, percubaan dibuat untuk memaparkan imej yang disimpan dalam gambar berubah secara dinamik. Imej-imej diambil daripada pembolehubah kedai Vuex, yang diisi secara tak segerak pada beforeMount. Walau bagaimanapun, paparan imej dinamik tidak berfungsi, manakala laluan imej yang ditakrifkan secara statik berfungsi dengan betul.

<img v-bind:src="'../assets/' Bagaimana untuk Memaparkan Imej Dinamik dalam Vue.js dengan Webpack? '.png' " v-bind:alt="Bagaimana untuk Memaparkan Imej Dinamik dalam Vue.js dengan Webpack?"><br>

Penyelesaian

Satu pendekatan yang ditemui untuk menyelesaikan isu ini ialah dengan memanfaatkan pemuatan modul dinamik :

<br>getImgUrl(pet) {<pre class="brush:php;toolbar:false">var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")

}

Dalam HTML, laluan imej dinamik boleh diakses menggunakan:

<br><img :src="getImgUrl(Bagaimana untuk Memaparkan Imej Dinamik dalam Vue.js dengan Webpack?)" v-bind:alt="Bagaimana untuk Memaparkan Imej Dinamik dalam Vue.js dengan Webpack?"><br>

Pendekatan ini menggunakan konteks modul dinamik untuk memuatkan imej daripada direktori yang ditentukan, membenarkan paparan imej dinamik.

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