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

参考:

经验分享 程序员 微信小程序 职场和发展