zoukankan      html  css  js  c++  java
  • 引用图片地址的时候要用require( )包裹起来

      <ul>
        <li  v-for="(item, index) in exclusiveBrand" :key="index"><img :src="item.img" alt=""></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;
               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- 2.53rem;
                max-height: 2.00rem;
              }
            }
          }
    

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

  • 相关阅读:
    excel上传和下载
    SublimeText快捷键大全(附GIF演示图)
    JS求多个数组的重复数据
    js各种宽高(3)
    js各种宽高(2)
    js各种宽高(1)
    echarts简单使用案例
    js小技巧
    原生jdbc执行存储过程
    Cron和Spring定时任务
  • 原文地址:https://www.cnblogs.com/wufenfen/p/13949235.html
Copyright © 2011-2022 走看看