在VUE3的组件中写样式时当需要用到css的背景图片,这时背景图片怎么引入呢?一般有两种方式:
一、相对路径引:

background: url("./../assets/img/test.png") no-repeat;

二、绝对路径

background: url("~@/assets/img/test.png") no-repeat;

和在vue的模板中使用还是有一些区别的,在vue模板中可以用:

 

<img :src="require('@/assets/img/test.png')" />
<img src="@/assets/img/logo.svg" />

SCSS中引入图片前面需要多加一个~号

为什么要加一~呢?

以~符号作为前缀主要是因为vue-cli默认配置的publicPath为/src,别名为@,而在scss中@是变量定义的前缀,所以需要加上~以示区分

这个小知识明白了吧,如果有帮助请帮点个赞,谢谢!

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐