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>

一篇不错的文章
vue中动态引入图片为什么要是require， 你不知道的那些事

今天的文章Vue项目中background-image属性设置方法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。