如何让DataV轮播表中显示图片

dataV组件库，常应用于大屏模块。 先阶段遇到这么个问题，如何在DataV的轮播表组件中使用图片？

如图所示： 第一步：问度娘，想什么啦，度娘没有的...

第二步，自己动手，丰衣足食啦！

首先，基本的轮播表的数据是这样的

export default {
    data:[
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
    ]
}

其次，我们知道了轮播表的属性 那么，其他的就好办了，开整。 唔第一，我们要有一个喜欢的数据，

//用户轮播表的属性
userConfig：{
    waitTime: 100000000, //轮播时间间隔
    headerBGC: "#fff", //表头背景色
    oddRowBGC: "#F5FAFF", //奇数行背景色
    evenRowBGC: "#fff", //偶数行背景色
    align: ["center", "left", "left", "center", "center", "center"], //列对齐方式
    data:[],
}，
//用户轮播表的数据
userConfigData：[
        {
          id: "1",
          name: "柳肖",
          job: "牛掰构件",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 520,
          headerImg: require("@/assets/Img/头像1.png"),
        },
        {
          id: "2",
          name: "强子",
          job: "也很牛构件",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 450,
          headerImg: require("@/assets/Img/头像2.png"),
        },
        {
          id: "3",
          name: "周强",
          job: "牛哇",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 180,
          headerImg: require("@/assets/Img/头像3.png"),
        },
        {
          id: "4",
          name: "蒋文明",
          job: "999",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 180,
          headerImg: require("@/assets/Img/头像4.png"),
        },
        {
          id: "5",
          name: "欧阳治",
          job: "666",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 180,
          headerImg: require("@/assets/Img/头像5.png"),
        },
        {
          id: "6",
          name: "树新风",
          job: "666",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 180,
          headerImg: require("@/assets/Img/头像6.png"),
        },
        {
          id: "7",
          name: "董礼貌",
          job: "666",
          uploadNum: 100,
          shareNum: 1000,
          downLoadNum: 180,
          headerImg: require("@/assets/Img/头像7.png"),
        },
]

然后，把数据放到userConfig.data里

//备用头像
let circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
userConfig.data = userConfigData.map((item)=>[
        // 头像  如果没有头像，则显示备用头像
       `<div style="width:100%;height:100%">
          <img style='width:36px;height:36px;'  
          src='${
            item.headerImg != null ? item.headerImg : circleUrl
          }'/>
        </div>`,
        // 若item的id大于3则显示数字，小于显示图片
        `<div>
            <span style='display:${item.id > 3 ? "inline" : "none"}'>${
              item.index
            }</span>
            <img style='width:20px;height:20px;display:${
              item.id > 3 ? "none" : "inline"
            }'  src='${
              item.id == 1
                ? require("@/assets/Img/Group 868.png")
                : item.id == 2
                ? require("@/assets/Img/Group 1105.png")
                : require("@/assets/Img/Group 1106.png")
            }' />
        </div>`,
        item.name,
        item.job,
        item.uploadNum,
        item.shareNum,
        item.downLoadNum,   
])

最后，启动页面，显示这样的界面即大功告成

注意：这里的src前不用加:,即<img :src=""></>因为:src是动态去绑定图片，但是我们现在是在拼数据，使用冒号反而使页面找不到src，从而找不到图片，变成这个样子

对亲有帮助的话，多多留言点赞留评论噢~(づ￣3￣)づ╭❤～