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

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

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

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

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

Вариант с Background image

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

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

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

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

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

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

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

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

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

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

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

Можно выбирать или менять изображение по двойному клику.

Можно использовать разные изображения внутри всех блоков.

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

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

Виджет Image:

Работает как контейнер для изображения.

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

Изображения можно быстро менять по двойному клику.

При создании класса для виджета Image меняются только стили, но не само изображение.

Background image:

Применяется как фоновое изображение к блоку.

Применяется ко всем элементам списка одинаково.

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

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

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

Создаете много карточек с разными изображениями.

Нужно быстро менять изображения.

Требуется гибкая настройка размера картинок в блоках.

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

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

Требуется точная настройка покрытия фона.

Нужно добавить затемнение поверх изображения.

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

Добавляем контейнеру фоновое изображение.

Выбираем настройки отображения фона — Покрывать.

Добавляем дополнительный фон черного цвета с прозрачностью 30%.

Резюме

Виджет Image → для однотипных блоков с разными изображениями.

Background image → для единичных фоновых изображений с настройкой покрытия или затемнением.