0

Всем привет, уважаемые разработчики!

Мне необходимо переписать данный пример: 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 изображения

Подскажите, пожалуйста, как можно решить данную задачу.

1 ответ 1

0

Нашёл как привязать динамическое значение к свойству псевдо-элемента

Динамически устанавливать собственные свойства компонента и здесь же указывать кастомные свойства:

<div :class="pieceClasses">
  <div :class="puzzleClasses"
    :style="`--my-src: url(${imageUrl})`"
  />
</div>

Внутри псевдо-элемента нужное нам CSS-свойство будет захватывать значение из нашего кастомно свойства:

.puzzle::before {
  background-image: var(--my-src);
}

Теперь свойство background-image псевдоэлемента .puzzle::before захватывает URL из переменной через кастомное свойство --my-src.

Однако, должен отметить, что конкретно для URL-ов такая привязка работает не так хорошо, как мне хотелось бы. Дело в том, что браузер формирует кучу запросов на скачивание бэгграунда с каждым тиком анимации! Думаю, браузер просто видит, что свойство нестатично, а значит пытается обновлять бэгграунд с ходом анимации.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.