Как включить изображение во встроенные стили CSS Vue Component без относительного пути?

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> теги.

Есть два варианта сделать это.

---

Первый вариант:

поскольку @ отображается как src/ в Webpack, используя ваш компонент, ваш путь должен быть 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>

Answer 2

просто обновите форму фонового URL

          <template>
  <div class="example-class">
    <p>Test</p>
  </div>
</template>
<style>
  .example-class {
     background-image: url("HOW to include the image here?");
  }
</style>

К

      <template>
  <div class="example-class">
    <p>Test</p>
  </div>
</template>
<style>
  .example-class {
     background-image: url("~@/assets/images/sidebar.svg");
  }
</style>