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

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

0 голосов
/ 02 декабря 2018

Итак, у меня есть этот код компонента 

<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

1 Ответ

0 голосов
/ 02 декабря 2018

Вы не можете использовать псевдоним @, поскольку 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>
...