Vue项目使用Img标签(遍历)无法显示
主要原因:img的地址使用require 关键词,并且不适用单引号和双引号
data() {
return {
title: Hello,
curr: Test,
dataArr: [
{
title: "收入",
data: "¥13820.00",
bgc: "background:#FFF0C9;",
url:require("../assets/logo.png")
// url:"../assets/logo.png"
},
{
title: "订单",
data: "82",
bgc: "background:#DDFFCA;",
url:require("../assets/logo.png")
// url:"../assets/logo.png"
},
{
title: "患者",
data: "182",
bgc: "background:#BFF2FF;",
url:require("../assets/logo.png")
// url:"../assets/logo.png"
},
{
title: "在线医生",
data: "31",
bgc: "background:#BAC3FF;",
url:require("../assets/logo.png")
// url:"../assets/logo.png"
}
]
}
使用的时候:
<div v-for="item in dataArr" :key="item.title">
{
{ item.data }}
<img :src="item.url"/>
</div>
例程地址:https://gitee.com/wangqingyuan1/vue-main-baseline
commit: 7e56f7a2f2883ce48508a2bf95ff64cf0111685c
参考:
上一篇:
通过多线程提高代码的执行效率例子
