Как я могу отображать изображения активов на веб-сайте Flutter? - PullRequest
Новая
       3

Как я могу отображать изображения активов на веб-сайте Flutter?

0 голосов
/ 19 апреля 2020

Когда я пытаюсь отобразить актив в Flutter Web , используя следующий синтаксис, изображение не отображается: 

Image.asset(
  'assets/image.png',
)

Вкл. мобильный , тот же код покажет изображение.

Структура выглядит следующим образом: 

assets
  image.png
lib
  ...
pubspec.yaml

В Pubspe c я объявляю актив следующим образом: 

flutter:
  assets:
    - assets/image.png

1 Ответ

0 голосов
/ 19 апреля 2020

Все активы хранятся в каталоге assets во Flutter Web, что означает, что актив изображения будет храниться в Интернете следующим образом: 

assets
  assets
    image.png
index.html
...

С этим знанием мы можем создать виджет, который обрабатывает поведение как для мобильных устройств, так и для веб-сайтов.
Обратите внимание, что мы можем использовать Image.network в Интернете, поскольку по умолчанию к изображениям обращаются через сеть в Интернете (так работает веб в целом). Путь будет yourdomain.com/assets/assets/image.png. 

class PlatformAwareAssetImage extends StatelessWidget {
  const PlatformAwareAssetImage({
    Key key,
    this.asset,
    this.package,
  }) : super(key: key);

  final String asset;
  final String package;

  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      return Image.network(
        'assets/${package == null ? '' : 'packages/$package/'}$asset',
      );
    }

    return Image.asset(
      asset,
      package: package,
    );
  }
}

Потенциально, это будет изменено в будущих версиях Flutter - это состояние вещей с v1.18.0-6.0.pre.82.

...