Image properties
Image URL
The image URL must be specified using the required image_url parameter. If you want to display a placeholder, but you don't have a valid URL, you can specify "image_url": "empty://".
To load images from assets, use the following URL format: "image_url": "divkit-asset://image.png". Note that the image must be located in your app's assets at divkit/image.png.
Image scale
You can set the image scale in the scale parameter:
fill: Fills all available space. If an image doesn't fit, it gets cropped.fit: Fits into the borders, any remaining space will be empty.no_scale: The image will retain its original aspect ratio.
The position of the image can be changed inside the border of the element using alignment via content_alignment_horizontal and content_alignment_vertical.
View an interactive example
Placeholders
A gray placeholder is displayed before the image is loaded. In place of it, you can insert:
placeholder_color: A colored solid placeholder.preview: An image encoded in base64.
If both preview and placeholder_color are specified, preview has a priority.
View an interactive example
Replacing a placeholder with animation
After the image is loaded, the placeholder will be replaced with the downloaded picture. To add a fade animation effect, specify the appearance_animation parameter:
{
"type": "image",
"appearance_animation": {
"type": "fade",
"alpha": 0.0,
"duration": 200.0
},
"image_url": ...
}
Learn more
Follow DivKit news in the Telegram channel: http://t.me/divkit_news
You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru