img标签如何添加动态src地址

把图片当成模块用require引入图片地址（不带图片名称），后面加上循环遍历的图片名称拼接后就可以展示图片。

即 require('@/assets/images/home/' + item.url)    // item.url 为图片名称

亲测有效代码如下：

<template>

  <div>

    <el-card class="box-card">

      <div slot="header">

        <div class="diplay-header">

          <span style="font-weight: 700; font-size: 16px">常用功能</span>

          <span style="font-size: 14px;color: rgba(48, 126, 243, 1);">设置</span>

        </div>

      </div>

      <div class="body body-box">

        <div class="div-box" v-for="item in cardList" :key="item.id">

          <div class="box-circle" :style="`background: ${item.color};`">           

 　　　 <img class="i-img" :src="require('@/assets/images/home/' + item.url)" alt="">

          </div>

          <div style="margin-top: 12px;">{{ item.name }}</div>

        </div>

      </div>

    </el-card>

  </div>

</template>

<script>

export default {

  data() {

    return {

      cardList: [

        {

          id: 1,

          name: '待分发业务处理',

          url: 'img_01.png',

          color: 'linear-gradient(138.6deg,#27d1d1 0%,#3fc7cd 100%);'

        },

        {

          id: 2,

          name: '待审批业务申请',

          url: 'img_02.png',

          color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'

        },

        {

          id: 3,

          name: '待审批任务',

          url: 'img_03.png',

          color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'

        },

        {

          id: 4,

          name: '预留分类',

          url: 'img_04.png',

          color: 'linear-gradient(138.6deg,#677eff 0%,#6469ff 100%);'

        },

        {

          id: 5,

          name: '预留分类',

          url: 'img_05.png',

          color: 'linear-gradient(138.6deg,#33d3d3 0%,#3fc7cd 100%);'

        },

        {

          id: 6,

          name: '预留分类',

          url: 'img_06.png',

          color: 'linear-gradient(138.6deg,#f6a562 0%,#f46732 100%);'

        },

        {

          id: 7,

          name: '预留分类',

          url: 'img_07.png',

          color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'

        },

        {

          id: 8,

          name: '预留分类',

          url: 'img_08.png',

          color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'

        }

      ]

    }

  }

}

</script>

<style lang="scss" scoped>

  .body-box{

    display: flex!important;

    justify-content: space-around;

    align-items: center;

  }

  .div-box {

    text-align: center;

    width: 12.5%;

  }

  .box-circle {

    position: relative;

    margin: 0px auto;

    width:50px;

    height:50px;

    background-color: aqua;

    border-radius: 35px;

    i {

      width: 24px;

      height: 24px;

    }

  }

  .i-img{

    position:relative;

    top: 9px;

  }

  .diplay-header {

    display: flex;

    justify-content: space-between;

  }

</style>