Свойства изображений

Ссылка на изображение

Ссылка на изображение должна быть указана с помощью обязательного параметра image_url. Если вы хотите отобразить заглушку, и у вас нет корректной ссылки, вы можете указать значение "image_url": "empty://".

Для загрузки изображений из ассетов можно использовать ссылку "image_url": "divkit-asset://image.png". В этом случае изображение должно быть расположено в ассетах вашего приложения по пути divkit/image.png.

Масштаб изображения

Вы можете задать масштаб изображения в параметре scale:

  • fill — заполняет все доступное место, что не помещается — обрезается;
  • fit — вписывается в границы, оставшееся место будет пустым;
  • no_scale — размер как есть.

Внутри границ элемента расположение картинки можно менять с помощью выравнивания через content_alignment_horizontal и content_alignment_vertical.

Посмотреть интерактивный пример

Заглушки

До загрузки изображения отображается серая заглушка. Вы можете вставить вместо нее:

  • placeholder_color — цветную однотонную заглушку;
  • preview — картинку, закодированную в base64.

Если preview и placeholder_color указаны вместе, preview имеет приоритет при отображении.

Посмотреть интерактивный пример

Замена заглушки с анимацией

После завершения загрузки изображения заглушка будет заменена на скачанную картинку. Чтобы замена произошла с эффектом fade-анимации, укажите параметр appearance_animation:

{
    "type": "image",
    "appearance_animation": {
        "type": "fade",
        "alpha": 0.0,
        "duration": 200.0
    },
    "image_url": ...
}

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit