动态加载img的文件路径和style

加蓓努力我先飞

已于 2022-04-15 14:25:27 修改

阅读量1k

点赞数

分类专栏：前端开发文章标签： vue.js

于 2021-12-11 17:22:52 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/121876566

版权

前端开发专栏收录该内容

92 篇文章 4 订阅

订阅专栏

<div style="">
      <el-row>
        <el-col :span="6" v-for="(item,index) in topList" :key="index">
          <div class="myimage" >
            <el-row>
              <el-col :span="12">
                <img :src="item.imgSrc" align="middle" />
              </el-col>
              <el-col :span="12">
                    <div style="word-wrap: break-word;word-break: break-all;overflow: hidden;"> <span :style="item.childSpan">{{item.number}}</span> {{item.classifier}}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

//导入相对定位地址
 import pic1 from '../../../assets/leadingCockpit/pic1.png'
 import pic2 from '../../../assets/leadingCockpit/pic2.png'
 import pic3 from '../../../assets/leadingCockpit/pic3.png'
 import pic4 from '../../../assets/leadingCockpit/pic4.png'

data() {
    // 这里存放数据
    return {
      topList:[
        {
          imgSrc:pic1,
          number: "300",
          childSpan: {
            fontSize:"105px",
            color:"#00EBFF",
            cursor:"pointer",
          },
        },
        {
          imgSrc:pic2,
          number: "4",
          childSpan: {
            fontSize:"105px",
            color:"#00EBFF",
            cursor:"pointer",
          },
        },
        {
          imgSrc:pic3,
          number: "400",
          childSpan: {
            fontSize:"105px",
            color:"#00EBFF",
            cursor:"pointer",
          },
        },
        {
          imgSrc:pic4,
          number: "40",
          childSpan: {
            fontSize:"105px",
            color:"#00EBFF",
            cursor:"pointer",
          },
        },
      ]
    };
  },