<p>Saya seorang pemula dengan vue.js dan saya cuba memaparkan imej secara dinamik tetapi saya menghadapi masalah dengan paparan dinamik, jika saya menukarnya secara manual ia berfungsi dengan baik. Saya menemui banyak soalan yang serupa dengan beberapa perbezaan dan tiada satu pun daripada mereka membantu saya. </p> <p>Ini adalah struktur saya: </p> <pre class="brush:php;toolbar:false;">-src --aset ---piza ----piza-1.jpg ----pizza-2.jpg ---hamburger ----hamburger-1.jpg ----hamburger-2.jpg ---kentang goreng ----french-fries-1.jpg ----french-fries-2.jpg --komponen --DBjson ---main.json</pre> <p>Saya cuba mencipta gelung ini: </p> <pre class="brush:php;toolbar:false;">`<div class="holder" v-for="restoran di restoran"> <img :src="getImage(restaurant.name, restaurant.mainImage)"/> </div> eksport lalai { nama: "restoran", data() { kembali { restInfo: this.$attrs.restData, }; }, kaedah: { getImage(folderName, imageName) { biarkan imej = require.context("@/assets/"); return image("./" + folderName + "/" + imageName); }, }, };`</pre> <p>Fail JSON saya:</p> <pre class="brush:php;toolbar:false;">{ "id": 1, "nama": "piza", "price": "$10", "Imej utama": "pizza-1.jpg", "images": ["pizza-2.jpg", "pizza-1.jpg"], },</pre>

getImage(folderName, imageName) {
  return require(`@/assets/${folderName}/${imageName}`)
}

getImage(folderName, imageName) {
  return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href;
}