如何在 Flutter web 上显示资源图片？

Question

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

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

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

结构如下：

assets
  image.png
lib
  ...
pubspec.yaml

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

assets
  image.png
lib
  ...
pubspec.yaml

Answer 1

所有资源都存储在assetsFlutter Web 中的一个目录中，这意味着图像资源在 Web 上将像这样存储：

assets
  assets
    image.png
index.html
...

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

assets
  assets
    image.png
index.html
...

这可能会在未来的 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'))。