如何在 none 相对路径中的 Vue 组件 CSS 内联样式中包含图像？

Question

所以我有这个组件代码

<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

Answer 1

您不能使用 @ 别名，因为 Webpack 无法理解 <style></style> 标签内的这个别名。

有两种选择。

第一个选项：

由于 @ 在 Webpack 中被映射为 src/，使用您的组件，您的路径应该是 <style></style> 标签中的 background-image: url('../../assets/images/cta-bg.png')。

第二个选项：

您可以直接在 <div> 标签中使用 style 绑定。

<div :style="backgroundImage: `url(${require(`@/assets/images/cta-bg.png`)})`">
  <p>Test</p>
</div>

如何在 none 相对路径中的 Vue 组件 CSS 内联样式中包含图像？

How to include image in Vue Component CSS inline styles in a none relative path?

vue.js

vue-cli-3