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
·
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, 你不知道的那些事
更多推荐
已为社区贡献34条内容
所有评论(0)