vue cli 3 - использовать фоновое изображение в теге стиля

Я хочу использовать изображение svg из папки моих ресурсов в одном из моих компонентов в качестве фонового изображения. Вот пример моего компонента:

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url('@/assets/image.svg');
}
</style>

Но изображение не отображается. Путь правильный. Где моя ошибка? Спасибо за вашу помощь.

Ответ 1

Как Макс Мартынов, выделенный в комментариях, вы должны использовать url('[email protected]/assets/image.svg').

У Webpack есть некоторые особые правила при разрешении ресурсов ^[1].

Чтобы разрешить псевдоним (@), который вы используете, обязательно веб-пакет обрабатывает запрос как запрос модуля. Использование префикса ~ заставляет веб-пакет обрабатывать запрос как запрос модуля, аналогично require('some-module/image.svg').

Рекомендации

https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

Ответ 2

Я бы порекомендовал использовать привязку стилей. Я нашел эту тему действительно полезной ссылкой.

Вот пример использования загрузочных карт

    <div
      class="card-image"
      :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">

Изображение находится в src/assets/images/cards.jpg