Mengapa Pemuatan Imej Dinamik Gagal dengan Vue.js dan Webpack?

Isu Pemuatan Imej Dinamik dalam Vue.js dengan Webpack

Apabila membina aplikasi web dengan Vue.js dan Webpack, memaparkan imej dinamik kadangkala boleh menimbulkan cabaran. Satu senario biasa ialah apabila nama fail imej disimpan dalam pembolehubah dan perlu dilampirkan pada laluan asas untuk menjana sumber imej yang lengkap.

Seorang pembangun menghadapi masalah apabila kod berikut, bertujuan untuk memaparkan imej secara dinamik berdasarkan sifat yang dikira, gagal:

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

Menariknya, pendekatan serupa menggunakan laluan imej statik berfungsi seperti yang dijangkakan:

<img src="../assets/dog.png" alt="dog">

Teka-teki terletak pada perbezaan antara kedua-dua pendekatan . Menggunakan laluan statik secara langsung mengarahkan Webpack untuk memasukkan imej dalam binaan, memastikan ketersediaannya semasa masa jalan. Walau bagaimanapun, pendekatan dinamik bergantung pada laluan imej yang dijana semasa runtime, yang Webpack tidak dapat jangkakan semasa proses binaan. Akibatnya, imej tidak disertakan dalam berkas, mengakibatkan fail hilang.

Untuk menangani isu ini, pembangun beralih kepada kaedah require.context(), yang menyediakan cara untuk memuatkan modul atau fail secara dinamik dalam konteks tertentu. Dengan menggunakan kod berikut:

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

dan mengemas kini HTML seperti berikut:

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

pemaju mencapai kesan yang diingini. require.context() membenarkan mereka memuatkan fail imej secara dinamik berdasarkan nilai sifat gambar dan Webpack menyertakan imej yang diperlukan dalam berkas.

Atas ialah kandungan terperinci Mengapa Pemuatan Imej Dinamik Gagal dengan Vue.js dan Webpack?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!