Fungsi paparan gambar dinamik Vue.js gagal

Question

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.

Ini adalah struktur saya:

-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

Saya cuba mencipta gelung ini:

`<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);
    },
 },
};`

Fail JSON saya:

{
    "id": 1,
    "nama": "piza",
    "price": "$10",
    "Imej utama": "pizza-1.jpg",
    "images": ["pizza-2.jpg", "pizza-1.jpg"],
},

Answer 1

getImage harus meminta dan mengembalikan imej menggunakan laluan fail relatif penuhnya

Vue 2.x

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

Vue 3.x + Vite

Setahu saya, Vite tidak dapat mengendalikan alias '@' untuk tugas khusus ini, jadi pastikan anda menetapkan laluan anda mengikut keperluan

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