vue 动态加载background-image 路径

1. 你一定发现，直接在class与style里面设置背景图片无效。
如果你么发现，请看这篇博文  https://www.cnblogs.com/tengyuxin/p/11192800.html

 

2. 下面重点说，vue中动态加载background-image

data(){
// 这是要用的数据
production: 
  [
    { 
     productName: 产品名1,
     productImage: /icon01.png ,
     productBackImage: rectAngle01.png ,
     productLink: /aa/bb/,
     explain: 基于Vue开发的UI系统结构框架
    },
    { 
         productName: 产品名2,
         productImage: /icon02.png ,
         productBackImage: rectAngle02.png ,
         productLink: /cc/dd/,
         explain: 基于Vue开发的UI系统结构框架
     }
  ]  
}

下面是template里面的html代码

<ul>
    <li v-for="(item,index) in data.production" :style="{backgroundImage:`url(${require('../../public/'+item.productBackImage)})`}" :key="item.productName">
        <a :href="item.productLink">
          <div>
            <img :src="item.productImage" />
          </div>
          <div style="margin-left: 24px;">
            <p class="productName">{{item.productName}}</p>
            <p class="productDescribe">{{item.explain}}</p>
          </div>
        </a>
     </li>
</ul>

 

关键就是这一行 

:style="{backgroundImage:`url(${require('../../public/'+item.productBackImage)})`}

// 你需要知道
// 1. 引入background-image背景图片，需要用require
// 2. 里面使用了ES6模板字符串语法，你要看懂
// 3. 为了让require里面的图片路径是变量，采用模板字符串的
// ***  4. 因为require引入图片是异步，你单纯的放进一个变量，会报错，找不到，所以我将
//相对路径（'../../public/'）以字符串形式放进去了