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;
}