app.vue @import "./static/tabbar_icon/icon_sel_audit@2x.png";图片怎么引入
时间: 2024-03-09 21:46:12 浏览: 61
Vue项目中如何引入icon图标
在Vue组件的样式中引入static目录下的图片,同样可以使用相对路径或者绝对路径。
如果你的组件样式是写在`<style>`标签中的,那么可以这样引入static目录下的图片:
```vue
<template>
<div class="my-component"></div>
</template>
<style>
.my-component {
background-image: url(../static/tabbar_icon/icon_sel_audit@2x.png);
}
</style>
```
这里的`..`表示返回上一级目录,然后进入static目录,找到对应的图片。
如果要使用别名引入static目录下的图片,可以这样写:
```vue
<template>
<div class="my-component"></div>
</template>
<style>
.my-component {
background-image: url('@/static/tabbar_icon/icon_sel_audit@2x.png');
}
</style>
```
需要注意的是,如果使用别名引入静态资源,需要在webpack配置中进行相应的配置。另外,如果你的组件样式是写在单独的`.css`文件中的,那么引入图片的方式和在普通的CSS文件中一样。
阅读全文