Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Image

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

Тип: 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:"Логотип"