vue遍历数组获取图片src显示不了的问题解决

解决方法：使用require请求图片

html

<div class="privilege-box">
        <div class="privilege-item" v-for="(item,index) in privilegeList" :key="index">
            <img :src="item.imgUrl" alt="">
            <span>{{item.text}}</span>
        </div>
    </div>

data数据

data() {
    return {
      activeName: 'activation',
      //   activationCode:'' // 激活码
      privilegeList:[
          {
              imgUrl:'@/assets/images/ic_hujiao@2x.png',
              text:'无线呼叫'
          },
          {
              imgUrl:'@/assets/images/ic_tuandui@2x.png',
              text:'专业医资'
          },
          {
              imgUrl:'@/assets/images/ic-bingli 4@2x.png',
              text:'病例存储'
          },
          {
              imgUrl:'@/assets/images/ic_shouhu@2x.png',
              text:'无休守护'
          },
          {
              imgUrl:'@/assets/images/ic_songyao@2x.png',
              text:'送药上门'
          }
      ]
    }
  },

效果图

image.png

重点来了

解决:使用require请求图片

data() {
    return {
      activeName: 'activation',
      //   activationCode:'' // 激活码
      privilegeList:[
          {
              imgUrl:require('@/assets/images/ic_hujiao@2x.png'),
              text:'无线呼叫'
          },
          {
              imgUrl:require('@/assets/images/ic_tuandui@2x.png'),
              text:'专业医资'
          },
          {
              imgUrl:require('@/assets/images/ic-bingli 4@2x.png'),
              text:'病例存储'
          },
          {
              imgUrl:require('@/assets/images/ic_shouhu@2x.png'),
              text:'无休守护'
          },
          {
              imgUrl:require('@/assets/images/ic_songyao@2x.png'),
              text:'送药上门'
          }
      ]
    }
  },

效果:

image.png