Vue.js 显示动态图像不起作用
发布于2023-02-03 03:31 阅读(372) 评论(0) 点赞(3) 收藏(2)
我是 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"],
},
解决方案
getImage 应该要求并使用图像的完整相对文件路径返回图像
Vue 2.x
getImage(folderName, imageName) {
return require(`@/assets/${folderName}/${imageName}`)
}
查看 3.x + 快速
据我所知，Vite 无法处理此特定任务的“@”别名，因此请务必相应地设置您的路径
getImage(folderName, imageName) {
return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/497292/d1f555a476cf2b7481f5/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力