引用图片地址的时候要用require( )包裹起来

Posted 2020-12-21 wufenfen

  <ul>
    <li  v-for="(item, index) in exclusiveBrand" :key="index"><img :src="item.img" ></li>
  </ul>


  data() {
    return {
      exclusiveBrand: [
        {
          id: 1,
          img: require(‘@/assets/ac-b2bpc/images/brand-3.png‘)
        },
        {
          id: 2,
          img: require(‘@/assets/ac-b2bpc/images/brand-4.png‘)
        },
        {
          id: 3,
          img: require(‘@/assets/ac-b2bpc/images/brand-5.png‘)
        },
        {
          id: 4,
          img: require(‘@/assets/ac-b2bpc/images/brand-6.png‘)
        },
        {
          id: 5,
          img: require(‘@/assets/ac-b2bpc/images/brand-7.png‘)
        },
        {
          id: 6,
          img: require(‘@/assets/ac-b2bpc/images/brand-8.png‘)
        },
        {
          id: 7,
          img: require(‘@/assets/ac-b2bpc/images/brand-9.png‘)
        },
        {
          id: 8,
          img: require(‘@/assets/ac-b2bpc/images/brand-10.png‘)
        },
        {
          id: 9,
          img: require(‘@/assets/ac-b2bpc/images/brand-11.png‘)
        },
        {
          id: 10,
          img: require(‘@/assets/ac-b2bpc/images/brand-12.png‘)
        },
        {
          id: 11,
          img: require(‘@/assets/ac-b2bpc/images/brand-13.png‘)
        },
        {
          id: 12,
          img: require(‘@/assets/ac-b2bpc/images/brand-14.png‘)
        }
      ]
    };
  }

其中css部分

     ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
          position: relative;
          width: 2.53rem;
          height: 2.00rem;
          border-bottom: .01rem solid #eee;
          border-right: .01rem solid #eee;
          cursor: pointer;
          img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 2.53rem;
            max-height: 2.00rem;
          }
        }
      }

渲染的时候图片一直没有出来，百度了一下，发现图片地址引用的时候要用require包裹起来才能正确渲染