Redel
@Redel

Как вставлять картинки через код css?

Помогите, пожалуйста, реализовать способ вставки картинки в css файле.

Все обложки, аватары аккаунтов и альбома берутся из папки upload, которые в свою очередь загрузил пользователь, чтобы не прописывать полный путь до картинки есть такой код или переменная (я пока не знаю точно, как этот код называется){{thumbnail}}
Я прописываю так в html
<img src="{{thumbnail}}" class="card-img h-100 scale shadow-deep" alt="card image" />

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

Подскажите, пожалуйста, как мне в css прописать правильно этот код
{{thumbnail}}

Мой пример в файле css:
background-image: url({{thumbnail}});

Мне нужно именно блоку дать картинку.
Мой способ нерабочий.
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
@alexalexes
Вы пытаетесь работать с CSS как с шаблоном - для этого нужно использовать препроцессор CSS такие как Sass, Stylus, Less.
Если у вас учебный проект, то это отдельная глава или даже раздел для набивания навыков и шишек.
Если проект боевой и довольно простой, то можно не ввязываться в дебри динамической генерации стилей, условится, что статичные свойства стилей вы записываете в файлах CSS, а динамические - в html вставками:
<style>
  .user-114__avatar
{
   background-image: url({{thumbnail}});
}
</style>
...
<!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в HTML-->
<div class="user__avatar user-114__avatar">
</div>

или инлайн-стилями:
<!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в инлайн-атрибуте тега-->
<div class="user__avatar" style="background-image: url({{thumbnail}});">
</div>

PS: Тег img некорректно использовать без src, фон в нем может выступать только дополняющим свойством, например, закрывать прозрачные участки картинки src. И с фоновым изображением придется работать по-другому, чтобы привести в порядок адаптивность элемента.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы