Всем привет, уважаемые разработчики!
Мне необходимо переписать данный пример: Pure CSS Puzzle Grid Gallery на Vue.js.
Проблема возникла, когда я захотел динамически подставлять URL картинок в CSS. Причем не просто в стиль компонента, а нужно попасть в псевдо-элемент ::before
:
.puzzle::before {
content: "";
/* Пробовал так - ничего не сработало */
background-image: url(attr(data-src));
/* Тут также ничего не сработало, даже если data-src обёрнут в `url("${}")` */
background-image: attr(data-src);
/* Со статичной ссылкой работает */
background-image: url("https://unsplash.it/600/600?image=1011");
}
При этом код шаблона выглядит так:
<div :class="pieceClasses">
<div :class="puzzleClasses"
:data-src="imageSrc"
/>
</div>
где imageSrc - это URL изображения
Подскажите, пожалуйста, как можно решить данную задачу.