我该如何在Flutter Web上显示资产图片？

Question

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

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

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

其结构如下：

assets
  image.png
lib
  ...
pubspec.yaml

在 Pubspec 中，我像这样声明资源文件：

flutter:
  assets:
    - assets/image.png

- creativecreatorormaybenot

Answer 1

所有资源都存储在Flutter Web中的assets目录中，这意味着图像资源将存储在Web上如下所示：

```html

所有资产都存储在Flutter Web中的assets目录中，这意味着图像资源将存储在Web上如下所示：

```

assets
  assets
    image.png
index.html
...

有了这个知识，我们可以创建一个小部件，处理移动和web的行为。
请注意，我们可以在web上使用 Image.network，因为默认情况下图像是通过网络访问的(这通常是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时的情况。

- creativecreatorormaybenot

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'))。

- Kaspi

Answer 3

我觉得这个更简单：

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

我总是需要使用 "assets/" 前缀，因为我的 "images" 文件夹在 "assets" 文件夹中；但是，在 Web 调试中，我需要省略 "assets/" 前缀。

- aldobaie