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