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

Posted wufenfen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了引用图片地址的时候要用require( )包裹起来相关的知识,希望对你有一定的参考价值。

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

以上是关于引用图片地址的时候要用require( )包裹起来的主要内容,如果未能解决你的问题,请参考以下文章

关于 require 动态地址引用的问题

在vue项目开发中, 为啥图片要用require 引入。。。而不是直接写本地路径

vue3中引入本地图片

vue中的js引入图片,使用require相关问题

Vue.js 图片不显示 | 图片资引用 | img src 路径出错

Vue.js 图片不显示 | 图片资引用 | img src 路径出错