Vue项目中background-image属性设置方法

vue项目中background-image属性设置方法

方式一：直接访问

在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。

<span class="item-icon"></span>

<style>
.item-icon {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  vertical-align: middle; /* 放置路径： public/image/file-icon.png */
  background-image: url('/image/file-icon.png');
}
</style> 
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

方式二：通过变量设置

<span class="item-icon" :style="{'background-image': `url(${require('@/assets/image/file-icon.png')})`}"
></span>

  

 

  
1
  
2
  
3
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/115480359