zoukankan      html  css  js  c++  java
  • 🍓 vue循环渲染本地图片不显示? 🍓


    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 + '')"
  • 相关阅读:
    Tips(持续跟新)
    icpc 2018 徐州 网络赛 B 博弈+记忆化搜索
    2018 徐州 icpc 网络赛 A 递推or数学公式
    2018 徐州icpc网络赛 G 分块
    HDU 3092 Least common multiple(完全背包+思维)
    hdu 4747(DP?线性递推)
    Pell-方程学习小结
    C++中map的介绍用法以及Gym题目:Two Sequences
    求最长上升子序列和最长非下降子序列
    dfs+枚举,flip游戏的拓展POJ2965
  • 原文地址:https://www.cnblogs.com/LLLLily/p/9894924.html
Copyright © 2011-2022 走看看