Flutter中图片无法在屏幕显示的问题求助

问题描述 #

在Flutter项目中尝试显示图片时失败，持续出现“图片不可用”报错，报错截图如下：

排查与解决步骤 #

• 确认资源配置与路径

  1. 将图片放置在项目的assets目录下（建议创建assets/images文件夹统一存放图片）
  2. 在pubspec.yaml中正确声明资源，注意缩进必须使用空格而非制表符：

     flutter:
       assets:
         - assets/images/你的图片文件名.png
     

  3. 执行flutter pub get命令刷新资源配置

• 检查文件名与代码引用一致性
  Flutter对文件名大小写敏感，确保代码中引用的路径和实际文件名完全匹配，示例代码：

  // 加载本地图片
  Image.asset('assets/images/你的图片文件名.png')
  // 加载网络图片
  Image.network('https://有效的图片URL地址')
  

• 验证图片文件有效性
  用本地图片查看器打开图片，确认文件未损坏；如果是网络图片，直接在浏览器中访问URL，确认图片可正常加载。

• 清理缓存重启项目
  执行flutter clean清理项目缓存，然后重新运行flutter run，避免缓存导致的资源加载异常。

• 平台权限配置（针对网络图片）

  • Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS：在ios/Runner/Info.plist中添加允许网络访问的配置：

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    

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