Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

Image

This page has not been translated into English yet. The Russian original is below.

Отображает изображение — файл из проекта или картинку по сетевому адресу.

Тип: leaf

Image src:"data/images/hero.png" fit:cover width:512 height:288
Image src:"https://example.com/poster.jpg" fit:cover

Откуда берётся картинка

Источник решает сама ссылка:

со схемой ( https:// , data: ) — внешний ресурс, он загружается по сети;
всё остальное — путь от корня проекта : data/images/hero.png .

Путь всегда от корня, а не относительно файла, где написана строка. Причина не стилистическая: раскрытие макроса переносит разметку между файлами, так что «текущий файл» на момент резолва — не тот, где строка написана; а ключ файла в опубликованной ревизии — ровно этот путь от корня.

Путь с .. — ошибка . Он открывается с диска в редакторе и отклоняется при синхронизации, то есть ломается ровно после публикации, когда проверять уже поздно.

Форматы

Приложение рисует png , jpg , webp , gif (в том числе анимированные), bmp , wbmp и svg . Вектор идёт своим путём отрисовки: как картинка он работает, а фоном ( #decoration → #image ) или аватаркой ( CircleAvatar ) — нет.

Браузер умеет больше: .ico и .avif он покажет, а приложение их не декодирует — на сайте картинка будет, в приложении останется пустое место. Анализатор сообщает об этом находкой asset_format_unsupported .

Параметры

Параметр	Тип	Описание
`src` (или `url` , или позиционный 0)	string	Путь от корня проекта либо адрес со схемой
`fit`	string	Режим заполнения: `contain` , `cover` , `fill` , `fitWidth` , `fitHeight` , `none` , `scaleDown`
`width`	double	Ширина
`height`	double	Высота
`alignment`	string	Выравнивание: `center` (default), `topLeft` , `bottomRight` и т. д.
`color`	color	Тонирование. Осмысленно вместе с `colorBlendMode` : сам по себе перекрашивает картинку целиком
`colorBlendMode`	string	Способ наложения цвета: `srcIn` для одноцветного знака, `multiply` , `srcATop` , …
`opacity`	double	0..1. Приглушение без обёртки в `Opacity`
`repeat`	string	`noRepeat` (default), `repeat` , `repeatX` , `repeatY` — плитка
`filterQuality`	string	`none` , `low` , `medium` (default), `high`
`scale`	double	Плотность пикселей в файле : `@2x` -ассет с `scale:2` рисуется вдвое мельче. Не размер на экране — для него `width` / `height` . Вектору не нужен
`#headers`	object	Заголовки запроса для картинки за авторизацией. Только для адреса со схемой
`#centerSlice`	object	Девятипатч: `fromLTRB 12 12 20 20` — тянется середина, углы остаются
`matchTextDirection`	bool	Зеркалить в RTL
`isAntiAlias`	bool	Сглаживание при масштабировании
`semanticLabel`	string	Что произносит читалка экрана и что становится `alt` на сайте. Без него картинка исключается из семантики, а не объявляется пустой

Пустой src , битая ссылка или отсутствующий файл — пустой SizedBox заданных размеров, без ошибки на экране. Находка asset_not_found при этом появляется в диагностиках, а в приложении промах уходит в лог.

Заданные width / height — не только размер на экране: по ним картинка декодируется в нужный размер, а не в исходный. Фотография 4000×3000 в аватарке 48×48 иначе занимает в кэше десятки мегабайт.

Как фон

Image рисует картинку как элемент. Фоном ПОД содержимым её кладёт #decoration → #image :

Container width:320 height:180
  #decoration
    #borderRadius circular 16
    #image "data/images/bg.jpg" fit:cover alignment:topCenter
  Center
    Text "Поверх картинки"

Вектор фоном быть не может: flutter_svg не даёт ImageProvider .

Примеры

Изображение с фиксированными размерами

SizedBox width:512 height:288
  ClipRRect
    #borderRadius circular 20
    Image src:"data/images/poster.png" fit:cover width:512 height:288

Фоновое изображение в Stack

Stack
  Image src:"data/images/bg.jpg" fit:cover
  Positioned bottom:20 left:20
    Text "Заголовок"
      #style fontSize:32 fontWeight:bold color:#FFFFFF

Вложенные каталоги

Image src:"data/images/onboarding/hero.webp" fit:cover

Одноцветный знак под цвет темы

Image src:"data/images/mark.png" width:24 height:24
  color:$theme.primary colorBlendMode:srcIn

Девятипатч: растягивается середина, углы остаются

Image src:"data/images/bubble.png" width:200 height:80 fit:fill
  #centerSlice fromLTRB 12 12 20 20

Картинка за авторизацией

Image url:"https://cdn.example.com/private.png" width:100 height:100
  #headers Authorization:"Bearer token"

Только для приложения: на сайте картинка приходит тегом <img> , а он заголовки не отправляет.

Ассет с удвоенной плотностью

Image src:"data/images/logo@2x.png" scale:2 semanticLabel:"Логотип"