Виджет Image и фоновое изображение: в чем разница?

Разберемся, в чем отличия между виджетом Image и Background image и когда лучше использовать каждый из них.

Смотрите видео:

https://vk.com/video-219751701_456239227

Практический пример: Блок-лист с картинками

Например, нам нужно сделать слайдер с карточками, которые будут пролистываться. В каждой карточке должна быть своя уникальная картинка.

Вариант с Background image

Здесь возникает сложность: если добавить карточке фоновое изображение, то оно применится сразу ко всем карточкам. Это происходит потому, что Блок-лист создает общий стиль для всех карточек.

Добавляем фоновое изображение элементу Блок-листа

Во всех карточках получилось одинаковое изображение

Можно обойти эту проблему, включив независимую структуру для Блок-листа. Тогда можно будет добавить разные фоновые изображения для каждого элемента Блок-листа. Но это сложный способ.

Можно применить независимую структуру в настройках Блок-листа

Вариант с виджетом Image

Для нашего примера проще использовать виджет Image. Нужно сделать следующие шаги:

Добавляем виджет Image в карточку — виджет появляется у всех элементов Блок-листа.

Настраиваем размеры для Image — 100% ширины и 100% высоты.

Задаем виджету Image абсолютное позиционирование и нулевые значения координат, чтобы картинка покрывала весь блок.

Абсолютное позиционирование у виджета Image

У родительского блока задаем относительное позиционирование, чтобы картинка не выходила за его пределы.

Относительное позиционирование у элемента Блок-листа

Меняем Z-индекс у текстов (значение 1), чтобы они были поверх изображения.

У текста задаем Z-индекс 1

По двойному клику на виджете Image добавляем индивидуальные изображения в каждую карточку.

Добавляем изображение в виджет Image

Готово! Мы сделали слайдер с карточками, в которых расположены разные картинки.

Преимущества виджета Image в этом случае:

Можно выбирать или менять изображение по двойному клику.
Можно использовать разные изображения внутри всех блоков.
Даже при создании класса для виджета Image (например, чтобы менять размер сразу у всех изображений), картинки в каждом блоке останутся разными.

Основные отличия виджета Image от Background image

Виджет Image:

Работает как контейнер для изображения.
Позволяет использовать разные изображения в однотипных блоках (например, в элементах Блок-листа).
Изображения можно быстро менять по двойному клику.
При создании класса для виджета Image меняются только стили, но не само изображение.

Background image:

Применяется как фоновое изображение к блоку.
Применяется ко всем элементам списка одинаково.
Можно использовать настройки отображения (покрытие фона).

Когда что использовать

Используйте виджет Image, когда:

Создаете много карточек с разными изображениями.
Нужно быстро менять изображения.
Требуется гибкая настройка размера картинок в блоках.

Используйте Background image, когда:

Нужно быстро поставить картинку на весь фон одного объекта (секции или контейнера).
Требуется точная настройка покрытия фона.
Нужно добавить затемнение поверх изображения.

Например, вот так можно добавить для контейнера фоновое изображение с полным покрытием и затемнением: