Flutter模拟器与物理设备图片无法加载、Chrome端正常问题咨询

最常见原因：大小写不匹配 #

• Flutter Web运行在桌面端Chrome时，依赖的桌面文件系统（Windows/macOS默认）对大小写不敏感，而Android/iOS设备的文件系统默认大小写敏感。
• 比如你的资源文件实际名为Assets/Background.png，但代码或pubspec.yaml中写的是assets/background.png，Web端可以正常识别加载，移动端会直接找不到资源报错。
• 修复方式：逐一核对资源文件名、pubspec.yaml中配置的路径、代码中调用的路径的大小写完全一致。

第二常见原因：pubspec.yaml资源配置错误 #

• Flutter对pubspec.yaml的缩进规则要求非常严格，资源配置必须正确缩进在flutter配置项下，示例正确配置如下：

flutter:
  # 保持2个空格缩进
  assets:
    # 保持4个空格缩进
    - assets/images/

• 如果assets配置项和flutter平级，或者缩进错误，移动端打包时不会将资源打进安装包，自然无法加载；而Web端调试时会直接读取本地项目目录的资源文件，所以不受影响。
• 修复方式：核对pubspec.yaml的资源配置缩进符合要求，配置路径和实际资源存放路径完全匹配。

第三常见原因：代码中资源路径写法错误 #

• 代码中调用资源时如果多加了开头的斜杠，比如写成AssetImage('/assets/images/xxx.png')，Web端可以正常解析路径，移动端会识别为无效路径。
• 修复方式：去掉路径开头的斜杠，统一写成AssetImage('assets/images/xxx.png')，和pubspec.yaml中配置的路径保持一致。

特殊场景：网络图片加载失败 #

• 如果你加载的是网络图片而非本地资源，移动端没有配置网络权限也会出现该问题：
  • Android端需要在android/app/src/main/AndroidManifest.xml中添加网络权限：<uses-permission android:name="android.permission.INTERNET"/>
  • iOS端如果加载的是HTTP协议的图片，需要在ios/Runner/Info.plist中配置NSAppTransportSecurity允许HTTP请求。

内容的提问来源于stack exchange，提问作者George Davis-Diver