Flutter Web打包Release时资源文件夹路径异常问题求助

Flutter 3.0.0 对Web端资源打包策略做了调整：

• 旧版本中，pubspec.yaml声明的assets/images/这类资源，打包后会直接放在build/web/assets/images/目录下
• 升级到3.0后，打包后的资源会被嵌套到build/web/assets/assets/images/路径中（多了一层assets目录），同时部分资源文件会被添加哈希后缀（比如logo.png变为logo.xxxxxx.png）
• 若代码中通过硬编码路径（而非Flutter标准资源API）引用图片，就会出现路径不匹配导致的加载失败。

方法1：使用Flutter标准资源API加载图片 #

确保所有图片都通过Image.asset、AssetImage等Flutter官方API引用，而非直接通过文件路径或dart:html访问。示例：

// 正确写法
Image.asset('assets/images/avatar.png')
// 错误写法（直接硬编码路径）
Image.network('assets/images/avatar.png')

执行以下命令清理缓存并重新打包：

flutter clean
flutter pub get
flutter build web --release

Flutter的资源API会自动解析打包后的正确路径，包括哈希化后的文件名和嵌套目录。

方法2：调整pubspec.yaml的资源声明 #

若需要保持打包后的资源结构与旧版本一致，可修改pubspec.yaml的资源配置，将根目录的assets文件夹作为顶级资源声明：

flutter:
  uses-material-design: true
  assets:
    - assets/

这样打包后，assets/images/下的文件会直接出现在build/web/assets/images/目录中，而非嵌套的assets/assets/images/。

方法3：打包时指定资源路径参数 #

若需要自定义打包后的资源存放路径，可使用--asset-base参数指定基础路径，示例：

flutter build web --release --asset-base=/assets/

该参数会让Flutter将资源打包到指定的基础路径下，适配部署环境需求。

方法4：针对非Flutter方式引用的图片 #

若必须通过dart:html或HTML标签直接引用图片，需先通过Flutter的资源API获取实际的资源URL：

import 'package:flutter/services.dart';
import 'dart:html' as html;

Future<String> getImageUrl(String assetPath) async {
  final key = await rootBundle.loadStructuredData<String>(
    assetPath,
    (value) async => value,
  );
  return html.window.location.origin + key;
}

之后用获取到的URL作为图片的引用路径。

内容的提问来源于stack exchange，提问作者Esteban Muñoz