Как правильно указать url фонового изображения в компоненте nuxt.js?

Question

[Дима Паутов]

Добрый день! Что-то никак не пойму, как правильно указать фоновое изображение блоку

<div class="servicesItemBg" :style="{'background-image': 'url(./images/bg/1.jpg)'}">
  <img src="./images/ico/1.png" alt="">
 </div>

Иконка без проблем вставилась, а фоновое нет, оно не подцепляется.


Исходя из панели разработчика, иконка обрабатывается компилятором, а фоновое изображение нет. Как правильно его прописать?

Так выглядит структура компонента

Answer 1

[Igor Koch]

:style="{'background-image': 'url(' + require('./images/bg/1.jpg') + ')' }"

Comments

[Дима Паутов]

Да, спс! После долгого гугления, всё же нашёл ответ. Я сделал так:

:style="{'background-image': `url(${require('./images/bg/1.jpg')})`}"

Дичь какая-то. Т.е. по другому именно фоновые картинки не как? Типа он не может эту строку распарсить?

[Igor Koch]

Дима Турков, Никак, nuxt не умеет определять в строке атрибута ссылку на файл, так что только так

Answer 2

[anton_trofimov95]

Вот так, вместо <img src="./images/ico/1.png" alt=""> <img src="~assets/ico/1.png" alt="">
Картинки должны у вас лежать в assets