如何在 Vue JS 的 img src 中引用图像路径
Posted
技术标签:
【中文标题】如何在 Vue JS 的 img src 中引用图像路径【英文标题】:How do I reference an image path in an img src in Vue JS 【发布时间】:2020-04-14 20:57:37 【问题描述】:我有一个来自道具的对象数组。每个对象都有一个 title 和 img 键值。我正在使用 v-for 来显示标题以及图像如何来自 img 值。
<div v-for="item in products" :key="item.id">
<h1>item title</h1>
<img :src="item.img">
</div>
export default
name: "home",
props: ["products"]
/*
here is the products
[id: 1, title: "Moe", img: "../assets/images/stooges/moe.jpg",
id: 2, title: "Larry", img: "../assets/images/stooges/larry.jpg",
id: 3, title: "Curly", img: "@/assets/images/stooges/curly.jpg"]
*/
;
在最后一个元素上,我正在尝试相对引用。我也尝试过类似的方法
<img :src="require(item.img)">
至少对于最后一个元素,我希望看到图像。
【问题讨论】:
你的根目录是什么? 这是 Vue CLI 3 项目吗? 我已经使用 vue --version 检查了我的提示。我正在使用@vue/cli 4.1.1 @Michal Levý @T。简而言之我的根目录有以下文件夹:node_modules、public、src 如果你的图片在src/assets/images/stooges/
文件夹"@/assets/images/stooges/curly.jpg"
应该可以工作(并且对我有用)
【参考方案1】:
<div v-for="item in products" :key="item.id">
<h1> item.title </h1>
<img :src="require(`@/assets/images/stooges/$item.img.jpg`)" />
</div>
export default
name: "home",
props: ["products"]
data()
return
products: [
[id: 1, title: "Moe", img: "moe",
id: 2, title: "Larry", img: "larry",
id: 3, title: "Curly", img: "curly"]
]
;
,
;
【讨论】:
完美!我现在可以看到图像了。非常感谢:-)以上是关于如何在 Vue JS 的 img src 中引用图像路径的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js 图片不显示 | 图片资引用 | img src 路径出错
Vue.js 图片不显示 | 图片资引用 | img src 路径出错
加载javascript时如何在vue组件中引用javascript中的img