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

【问题标题】：How can I display Asset Images on Flutter web?如何在 Flutter web 上显示资产图像？
【发布时间】：2020-08-01 17:22:38
【问题描述】：

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

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

在手机上，同样的代码会显示一张图片。

结构如下：

assets
  image.png
lib
  ...
pubspec.yaml

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

flutter:
  assets:
    - assets/image.png

【问题讨论】：

标签： flutter dart flutter-web

【解决方案1】：

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

assets
  assets
    image.png
index.html
...

有了这些知识，我们可以创建一个小部件来处理移动设备和网络的行为。
请注意，我们可以在 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 的状态。

【讨论】：

【解决方案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'))。

【讨论】：

【解决方案3】：

我觉得这更简单：

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

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

【讨论】：