我有这个组件代码
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
如何在样式部分代码中包含图像?
我的组件在目录中
src/component/sample-comp/MyComponent.vue
我的图像在目录中
assets/images
我已经尝试使用@/assets/images/sample-image.png
,它不会包含图像。它在下面给出错误
ERROR Failed to compile with 1 errors 08:53:42
This relative module was not found:
* ./@/assets/images/cta-bg.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18a303e8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/frontend/landing-layouts/CallToAction.vue
2条答案
按热度按时间m528fe3b1#
您不能使用
@
别名,因为Webpack无法识别<style></style>
标记中的此别名。有两个选项可执行此操作。
第一个选项:
由于
@
在Webpack中Map为src/
,因此使用您的组件时,您的路径在<style></style>
标记中应为background-image: url('../../assets/images/cta-bg.png')
。第二个选项:
您可以直接在
<div>
标签中使用style
系结。oogrdqng2#
只需更新后台URL表单
结束日期