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包裹起来才能正确渲染

  • 相关阅读:
    bootstrap class sr-only 什么意思?
    PHP 中的文本截取分析之效率
    FastAdmin 升级后出现 is already in use
    FastAdmin 环境变量 env 配置
    Nginx 服务器伪静态配置不当造成 Access denied
    笔记:明确认识
    进程通信(socket)
    进程间通信(了解)
    c++ 继承,组合
    c++ 类初始化
  • 原文地址:https://www.cnblogs.com/wufenfen/p/13949235.html
Copyright © 2011-2022 走看看