Flutter Web特定图片仅生产环境不显示的解决方案求助

安全阿岳

2026-7-23

Flutter Web生产环境背景图不显示问题

开发环境与生产环境对比
左侧为开发环境，右侧为生产环境

问题详情

某张图片作为背景图，使用Image.asset()加载本地资源，开发环境显示正常，但部署到Firebase Hosting的生产环境无法显示
已确认build文件夹中图片位置完全正确
控制台无“无法加载image_1.png”这类错误提示
其他图片均能正常显示

解决方法

检查路径大小写
生产环境服务器通常区分大小写，而开发环境（如Windows系统）不区分。确保代码中Image.asset()的路径和实际文件路径大小写完全一致，比如代码写assets/images/Image_1.png，实际文件是assets/images/image_1.png就会导致加载失败。
清理缓存重新构建
执行以下命令彻底清理缓存后重新打包部署：
```
flutter clean
flutter pub get
flutter build web --release
```
避免旧构建缓存导致资源未正确打包。

检查背景图配置
如果是通过Container的decoration使用DecorationImage作为背景，确认配置参数正确，比如：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/your_image.png'),
      fit: BoxFit.cover, // 确保fit属性合理，避免图片被隐藏
    ),
  ),
)

验证Firebase部署配置
检查firebase.json的hosting配置，确保没有限制图片资源访问：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}