v-for循环中如何处理图片的渲染问题

DOM层代码：

 <div class="cardWrap">
        <div v-for="(item, index) in cardList" :key="index" class="cardItem">
          <i></i>
          <div class="label">
            <div class="name">{{ item.name }}</div>
            <div class="num">
              <em>{{ item.num }}</em>
              <span>项</span>
              <span>{{ item.state }}</span>
            </div>
          </div>
        </div>
      </div>

css代码：

  .cardWrap {
      margin-bottom: 23px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        height: 72px;
        flex: 1;
        padding: 16px 13px;
        > i {
          width: 44px;
          height: 45px;
          display: inline-block;
        }
        span {
          font-size: 14px;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #ffffff;
        }
        em {
          font-size: 24px;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #ffffff;
        }
        &:not(:last-child) {
          margin-right: 20px;
        }
        @for $i from 1 through 5 {
          &:nth-child(#{$i}) {
            background: url('./newImg/card#{$i}.png') no-repeat;
            background-size: 100% 100%;
            > i {
              background: url('./newImg/cardIcon#{$i}.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .name {
          font-size: 16px;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #ffffff;
        }
        .label {
          display: inline-block;
          margin-left: 13px;
          line-height: 24px;
        }
        .num {
          margin-left: 89px;
        }
      }
    }

在这里要注意图片的命名要以i为区别

 cardList: [
        {
          name: 'xxx',
          num: '2',
          state: '待审核'
        },
        {
          name: 'yyy',
          num: '2',
          state: '待审核'
        },
        {
          name: 'zzz',
          num: '2',
          state: '待审核'
        },
        {
          name: 'hhh',
          num: '2',
          state: '待审核'
        },
        {
          name: 'fff',
          num: '2',
          state: '待审核'
        }
      ],

效果如图所示：

只循环一组图片时dom层的写法：

  <ul>
        <li v-for="(item, index) in List" :key="index">
            <i :class="'iconBox' + (index + 1) "></i>
        </li>
      </ul>

css写法：

 @for $i from 1 through 2 {
        .iconBox#{$i} {
          background: url('../img/cardIcon#{$i}.png') no-repeat;
          background-size: 100% 100%;
        }
      }