Почему не отображается фон в VUE вставленный через Style в сам код?

Question

[kroha3000]

<a href="#" style='background:url('@/assets/images/image.jpeg');'></a>

Не отображается изображение....

Через:

:style="{ background: `url(${imageUrl}) no-repeat center` }"

Тоже что то не выходит. Толи пути не верно задаю, толи чё, понять не могу.

:style="{ background: `url(@/assets/images/image.jpeg) no-repeat center` }"

Comments

[Andrey Suha]

Где стили для а? Где наличие ошибок в консоли? Где в конце концов максимально приближенный пример в песочнице?

[kroha3000]

Andrey Suha, в консоле ошибок нет.

Какая разница какой стиль A? - обычный width:200px; height:200;

блок тестовый. ошибка в выводе где то фона. так как задаю через как положено, отображение есть всё норм. Как только в теле идёт задавание фона через style="" - тупо нет отображение. консоль/терминал, ошибок не выдаёт.

Answer 1

[Aetae]

Потому что на этапе исполнения пути @/assets/images/image.jpeg не существует. Это не волшебство. На этапе компиляции vue-compiler проходится по известному списку атрибутов, а postcss по стилям и заменяют такие пути на результаты loader'a(по умолчанию: data-uri для мелких файлов и внутренние пути относительно spa для остальных). Простые произвольные строки(которой и является `url(@/assets/images/image.jpeg) no-repeat center`) само собой анализу и замене не подвергаются.
Надо явно получить результат loader'a(через require('путь')) и использовать его где нужно.

Условно так:

:style="`background: url(${require('@/assets/images/image.jpeg')}) no-repeat center`"

Comments

[kroha3000]

Спасибо!

теперь понял почему у меня все пути с http... работали, а через @не работали.