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/，因此使用您的组件，您的路径应在background-image: url('../../assets/images/cta-bg.png')标记中为<style></style>。

第二个选项：

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

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

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

1 个答案: