Flutter Web中资源图片无法加载问题求助

问题重现 #

开发Flutter Web应用时，本地资源图片无法加载，无报错信息，图片区域完全空白。相关代码与配置如下：

Dart代码片段

const Text(
'You have pushed the button this many times:',
),
Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),
Text("Image should be shown here"),
Image.asset(
  "assets/images/logo.png",
  height: 200,
  width: 200,
  fit: BoxFit.cover,
),

pubspec.yaml配置

flutter:
  assets:
    - assets/images/

页面截图

排查与解决步骤 #

• 检查路径与文件名大小写
  Flutter Web对文件路径大小写敏感，确保代码中assets/images/logo.png的文件名、路径大小写与本地文件完全一致，比如实际文件是Logo.png会导致加载失败。同时确认文件确实存在于对应目录。

• 验证pubspec.yaml配置
  YAML文件对缩进要求严格，确保assets下的条目是2个空格缩进（禁止用Tab）。可尝试直接指定单个文件路径测试：

  flutter:
    assets:
      - assets/images/logo.png
  

  修改配置后执行flutter clean && flutter pub get，清除缓存后重新运行项目。

• 清理项目与浏览器缓存
  执行flutter clean清除Flutter项目缓存，再重新编译运行。同时在浏览器中清除缓存，或使用无痕模式打开页面，避免旧缓存干扰。

• 检查编译模式与资源打包
  尝试用生产模式运行：flutter run -d chrome --release，开发模式可能存在路径解析问题。编译完成后查看build/web/assets目录，确认images/logo.png是否已被正确打包。

• 测试图片组件可用性
  替换为在线图片测试组件是否正常：

  Image.network(
    "https://picsum.photos/200/200",
    height: 200,
    width: 200,
    fit: BoxFit.cover,
  )
  

  若在线图片能显示，说明问题集中在本地资源配置环节。

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