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
...

借助这些知识，我们可以创建一个处理移动和网络行为的小部件。
请注意，我们可以在网络上使用Image.network，因为默认情况下图像是通过网络通过网络访问的（通常是网络的工作方式）。路径为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构建中的资产当前放置在另一个last()目录下，这导致路径为Any?。

创建一个简单的函数，例如在assets/中：

assets/assets/...

使用此函数包装所有路径字符串，例如lib/utils.dart。

如何在Flutter网站上显示资产图片？

2 个答案: