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

Memaparkan Imej Dinamik dalam Aplikasi Vue.js dengan Webpack

Dalam aplikasi Vue.js, memberikan imej dinamik boleh terbukti mencabar apabila imej disimpan dalam pembolehubah dan diakses melalui fail laluan. Untuk mengatasinya, pembangun biasanya menghadapi masalah apabila menggunakan v-bind:src dengan nilai dikira yang mendapatkan semula nama fail imej.

Kaedah Asal:

<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">

Masalah:

Pendekatan ini tidak memaparkan imej dinamik apabila imej nama fail disimpan dalam pembolehubah.

Penyelesaian:

Untuk menyelesaikannya, kaedah tersuai getImgUrl boleh ditakrifkan untuk mendapatkan semula URL imej secara dinamik dan mengikatnya pada atribut src bagi elemen img.

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

<!-- HTML -->
<img :src="getImgUrl(pic)" v-bind:alt="pic">

Mengapa Kaedah Asal Gagal:

Kaedah asal gagal kerana Vue.js tidak dapat menyelesaikan rentetan laluan fail secara dinamik. Fungsi require.context membolehkan Vue mengakses aset statik dalam aplikasi, menjadikan kaedah getImgUrl sebagai penyelesaian yang lebih dipercayai.

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