teamList: [{
title: '大数据拍牌',
imgUrl: './img/data.jpg',
introduce: '5星服务:强烈推荐',
cost: '15000',
bail: '3次不中赔1500',
scale: '30%',
type: '1',
}, {
title: 'E沪牌',
imgUrl: "./img/Ehupai.jpg",
introduce: '专业拍手,专线网络',
cost: '20000',
bail: '3次不中赔1500',
scale: '40%',
type: '3',
}, {
title: '淘沪牌',
imgUrl: "./img/taohupai.jpg",
introduce: '专业拍手,专线网络',
cost: '12000',
bail: '无保证金',
scale: '20%',
type: '4',
}, {
title: '168沪牌',
imgUrl: "./img/168hupai.jpg",
introduce: '专业拍手,专线网络',
cost: '8000',
bail: '无保证金',
scale: '10%',
type: '5',
}]

 

.vue文件

<ul class="list">
<li class="item" v-for="(item,index) in teamList" :key="index">
<!-- <img class="item_pic" :src="require(item.imgUrl + '')" alt=""> -->
<img class="item_pic" :src="item.imgUrl" alt="">
<p class="txt">{{item.introduce}}</p>
<p class="txt">手续费:<span>{{item.cost}}</span></p>
<p class="txt">保证金:<span>{{item.bail}}</span></p>
<p class="txt">中标率:<span>{{item.scale}}</span></p>
<p class="btn" @click="Go(item)">预约团队</p>
</li>
</ul>

效果(图片不显示)

修改src如下⬇️

<ul class="list">
<li class="item" v-for="(item,index) in teamList" :key="index">
<img class="item_pic" :src="require(item.imgUrl + '')" alt="">
<p class="txt">{{item.introduce}}</p>
<p class="txt">手续费:<span>{{item.cost}}</span></p>
<p class="txt">保证金:<span>{{item.bail}}</span></p>
<p class="txt">中标率:<span>{{item.scale}}</span></p>
<p class="btn" @click="Go(item)">预约团队</p>
</li>
</ul>

完美解决!!

划重点: 图片模块化引入

:src="item.imgUrl"  -->  :src="require(item.imgUrl + '')"

最新文章

  1. 实现一个基于 SharePoint 2013 的 Timecard 应用(上)
  2. audio 基本功能实现(audio停止播放,audio如何静音,audio音量控制等)
  3. nandflash的读写(2440)
  4. urlencode遇到中文编码问题
  5. IT人经济思维之投资 - 创业与投资系列文章
  6. kendo ui简介
  7. i春秋手动病毒查杀
  8. HTML5 history新特性pushState、replaceState
  9. hbuilder中如何使用egit上传项目
  10. qau-国庆七天乐——A
  11. bzoj3745: [Coci2015]Norma
  12. Android线程管理(二)&mdash;&mdash;ActivityThread
  13. Java.util.ArrayList详解
  14. windows平台下php版本问题–VC6/VC9和TS/NTS
  15. SQL Server中时间段查询
  16. PHP问题
  17. [转]NodeJS、NPM安装配置步骤(windows版本)
  18. 微软官方的Unity支持组件
  19. trie树模板(统计难题)
  20. android Tweened Animations

热门文章

  1. python之面相对象进阶
  2. 【题解】洛谷P3660 [USACO17FEB]Why Did the Cow Cross the Road III
  3. JS正则四个反斜杠的含义
  4. 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件
  5. HTML5新增特性
  6. Golang常见误区(二)
  7. mysql 5.7 json
  8. 在nginx上用FastCGI解析PHP
  9. C#中使用JavaScriptSerializer类实现序列化与反序列化
  10. Python——网络编程基础