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
参考:
上一篇:
通过多线程提高代码的执行效率例子