Flutter build web生成嵌套assets目录致图片无法加载问题

问题 #

执行flutter build web构建Web项目后，出现assets目录嵌套的情况：浏览器会从<domain>/assets/images/<图片名>路径请求图片，但实际图片被存放在嵌套的assets/assets/images/路径里，导致图片加载失败。

相关信息 #

pubspec.yaml配置 #

flutter:
  assets:
    - assets/images/
  fonts:
    - family: NunitoSans
      fonts:
        - asset: assets/fonts/NunitoSans-Regular.ttf
        - asset: assets/fonts/NunitoSans-Bold.ttf
        - asset: assets/fonts/NunitoSans-ExtraBold.ttf
  generate: true

项目根目录结构 #

根目录下包含assets文件夹（内部有images和fonts子文件夹），以及lib、pubspec.yaml等标准Flutter项目文件。

图片加载代码 #

Image.asset(
  'assets/images/temp.jpg',
  height: height * 0.5,
  width: width * 0.4,
  fit: BoxFit.fill,
)

构建后目录结构 #

构建完成后，web/assets目录下额外生成了一层assets文件夹，图片实际路径为web/assets/assets/images/temp.jpg。

解决办法 #

方法1：调整asset路径配置（推荐） #

修改pubspec.yaml里的asset路径，同时同步调整图片加载路径：

• 修改后的pubspec.yaml：

flutter:
  assets:
    - images/
  fonts:
    - family: NunitoSans
      fonts:
        - asset: assets/fonts/NunitoSans-Regular.ttf
        - asset: assets/fonts/NunitoSans-Bold.ttf
        - asset: assets/fonts/NunitoSans-ExtraBold.ttf
  generate: true

• 修改后的加载代码：

Image.asset(
  'images/temp.jpg',
  height: height * 0.5,
  width: width * 0.4,
  fit: BoxFit.fill,
)

修改后执行flutter clean再重新构建，即可避免目录嵌套问题。

方法2：关闭asset自动生成 #

如果不需要generate: true的asset优化功能，可将其改为false，之后执行flutter clean和flutter build web重新构建：

flutter:
  assets:
    - assets/images/
  fonts:
    - family: NunitoSans
      fonts:
        - asset: assets/fonts/NunitoSans-Regular.ttf
        - asset: assets/fonts/NunitoSans-Bold.ttf
        - asset: assets/fonts/NunitoSans-ExtraBold.ttf
  generate: false

方法3：手动调整目录（临时方案） #

每次构建完成后，将web/assets/assets/下的所有文件移动到web/assets/目录，再删除多余的嵌套assets文件夹。此方法需每次构建后重复操作，仅适合临时救急。

原因说明 #

开启generate: true后，Flutter的asset优化机制会解析配置路径，当路径以assets/开头时，会在构建后重复生成该前缀目录，导致嵌套结构出现，与浏览器请求路径不匹配。

内容的提问来源于stack exchange，提问作者Rony Tesler