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>   

方式二:通过变量设置

<span class="item-icon" 
    :style="{'background-image': `url(${require('@/assets/image/file-icon.png')})`}"
></span>
上一篇:js跨域的研究


下一篇:Nexus.js介绍:一个多线程的JavaScript运行库