Vue.js動態圖片顯示功能失效

Question

我是vue.js的初學者，我正在嘗試動態顯示圖片，但在動態顯示方面遇到了問題，如果我手動更改它們，它們可以正常工作。我找到了許多類似的問題，但有些差異，沒有一個能幫助我。

這是我的結構：

-src
  --assets
    ---pizza
      ----pizza-1.jpg
      ----pizza-2.jpg
    ---hamburger
      ----hamburger-1.jpg
      ----hamburger-2.jpg
    ---french-fries
      ----french-fries-1.jpg
      ----french-fries-2.jpg
 --components
 --DBjson
   ---main.json

我正在嘗試創建這個循環：

`<div class="holder" v-for="restaurant in restaurants">
  <img :src="getImage(restaurant.name, restaurant.mainImage)"/>
 </div>

  export default {
name: "restaurant",
data() {
    return {
        restInfo: this.$attrs.restData,
    };
},
methods: {
    getImage(folderName, imageName) {
        let image = require.context("@/assets/");
        return image("./" folderName "/" imageName);
    },
 },
};`

我的JSON檔：

{
    "id": 1,
    "name": "pizza",
    "price": "$10",
    "mainImage": "pizza-1.jpg",
    "images": ["pizza-2.jpg", "pizza-1.jpg"],
},

Answer 1

getImage應該使用圖像的完整相對檔案路徑來要求並返回圖像

Vue 2.x

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

Vue 3.x Vite

據我所知，Vite無法處理'@'別名用於此特定任務，所以請確保根據需要設定您的路徑

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