如何在 Flutter web 上显示资产图像？

Question

当我尝试使用以下语法在 Flutter Web 中显示资产时，没有显示图像：

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

在 移动设备 上，相同的代码将显示图像。

结构如下：

assets
  image.png
lib
  ...
pubspec.yaml

在 Pubspec 中，我这样声明资产：

flutter:
  assets:
    - assets/image.png

Answer 1

所有资源都存储在Flutter Web中的一个assets目录中，也就是说图片资源在web上会这样存储：

assets
  assets
    image.png
index.html
...

有了这些知识，我们可以创建一个小部件来处理移动和 Web 的行为。
请注意，我们可以在 web 上使用 Image.network，因为默认情况下图像是通过网络在 web 上访问的（这通常是 web 的工作方式）。路径将是 yourdomain.com/assets/assets/image.png.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

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 的状态。

Answer 2

出于某种原因，Web 构建中的资产当前位于另一个 assets/ 目录下，这导致路径为 assets/assets/....

创建一个简单的函数，例如在 lib/utils.dart:

import 'package:flutter/foundation.dart';

String path(str) {
  return (kIsWeb) ? 'assets/$str' : str;
}

使用此函数包装任何路径字符串，例如 AssetImage(path('images/bg.jpg'))。

Answer 3

我觉得这个更简单：

Image.asset("${(kDebugMode && kIsWeb)?"":"assets/"}images/mds_square.png"),

我总是需要“assets/”前缀，因为我的“images”文件夹在“assets”文件夹中；但是，在网络调试中，我需要发出“assets/”前缀。

如何在 Flutter web 上显示资产图像？

How can I display Asset Images on Flutter web?

dart

flutter

flutter-web