<p>我是一个vue.js的初学者，我正在尝试动态显示图片，但在动态显示方面遇到了问题，如果我手动更改它们，它们可以正常工作。我找到了许多类似的问题，但有一些差异，没有一个能帮助我。</p> <p>这是我的结构：</p> <pre class="brush:php;toolbar:false;">-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</pre> <p>我正在尝试创建这个循环：</p> <pre class="brush:php;toolbar:false;">`<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); }, }, };`</pre> <p>我的JSON文件：</p> <pre class="brush:php;toolbar:false;">{ "id": 1, "name": "pizza", "price": "$10", "mainImage": "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;
}