未加载 Flutter 图像（例外：解析图像编解码器）

Question

当我尝试运行图像资产未正确加载时，出现异常：

The following assertion was thrown resolving an image codec: Unable to load asset: /images/p8.png`

几周前它还在工作，现在停止了。我尝试从不同的电脑运行和 mac 也尝试（使用模拟器），但仍然无法加载图像。相反，字体已正确加载。

这是我加载图像的方式，它们在 GridView 中呈现下面是代码：

return new Expanded(
      child: new GridView.count(
          crossAxisCount: 2,
          padding: const EdgeInsets.fromLTRB(16.0, 25.0, 16.0, 4.0),
          children: <Widget>[
            new MaterialButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/biliardo');
              },
              child: new Column(
                children: <Widget>[
                  new Image(
                    //parte importante, definire gli asset per trovarli più velocemnte
                    //si inseriscono nel pubspec.yaml
                    image: new AssetImage('/images/p8.png'),
                    height: 100.0,
                    width: 100.0,
                  ),
                  new Text(
                    "BILIARDO",
                    style: new TextStyle(
                      color: (darkTheme) ? Colors.blue : Colors.black,
                    ),
                  )
                ],
              ),
            ),

            .....

    );

pubsec.yaml 文件代码：

flutter:
  uses-material-design: true
  assets:
    - images/emptyBall.png
    - images/p1.png
    - images/p2.png
    - images/p3.png
    - images/p4.png
    - images/p5.png
    - images/p6.png
    - images/p7.png
    - images/p8.png
    - images/p9.png
    - images/p10.png
    - images/p11.png
    - images/p12.png
    - images/p13.png
    - images/p14.png
    - images/p15.png
    - images/basket.png
    - images/volley.png
    - images/tennis.png
    - images/rugby.png
    - images/numbers.png
  fonts:
    - family: ShotClock
      fonts:
        - asset: utils/ShotClock.ttf

日志

颤振分析

Analyzing D:\Android\AndroidStudioProjects\flutter_app...
No issues found!
Ran in 5.2s

flutter -v 运行

https://docs.google.com/document/d/133Z7029VGJXBDCYLgCrj09F9cLbvIQQ5X8yBS4pPC7I/edit?usp=sharing

颤动医生

flutter doctor -v

[√] Flutter (Channel beta, v0.3.1, on Microsoft Windows [Versione 10.0.16299.371], locale it-IT)
    • Flutter version 0.3.1 at C:\Program Files\Flutter\flutter
    • Framework revision 12bbaba9ae (12 days ago), 2018-04-19 23:36:15 -0700
    • Engine revision 09d05a3891
    • Dart version 2.0.0-dev.48.0.flutter-fe606f890b

[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at C:\Users\Zanini\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 24.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[√] Connected devices (1 available)
    • Nexus 5X • 01cde5e7db8d4c14 • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

Answer 1

删除 png 路径中的前导 /。应该是 images/p8.png.

此外，考虑使用更清洁的 Image.asset 构造函数，例如：

new Image.asset('images/p8.png', width: 100.0, height: 100.0)

Answer 2

使用新的 flutter 版本，您还可以将文件夹放入 pubspec.yaml，而不仅仅是文件

flutter:
  uses-material-design: true
  assets:
    - images/

Answer 3

在所有图片路径中正确添加'/'

在Android工作室中，

工具->Flutter->Flutter Clean

Answer 4

需要注意的一件事是 'assets:' 标签必须与 'flutter:' 标签正确缩进，但它只会在偶尔加载资产。所以这行不通：

flutter: 
assets:
    - images/

但这将：

flutter: 
  assets:
    - images/

Answer 5

除了目录路径之外，请确保您的图像有效，我有一个不受支持的 png 文件，它导致了此错误。只需确保在任何图像查看器中打开图像以确认该文件受支持。 ..

Answer 6

我在 Windows 10 而不是 MAC OS X 或 Linux 上开发我遇到了同样的问题......事实上我的解决方案只是更改类似 unix 的路径分隔符：'/' 为 windows 环境的分隔符：[=31 中的 '\' =] 文件

所以在 pubspec.yaml images/mypicture.jpg 在飞镖文件中：当用 :

实例化你的 object 时

child 新 Images.asset('images\mypicture.jpg')

双重反斜杠：\\太转义了\字符.....

希望它能帮助许多 Windows 基于平台的开发人员使用 flutter

这使其可以在 Android 模拟器上运行，但 在物理移动设备上，我想您需要在打包之前使用斜线代替 / 以其他方式进行更改两者都试试...

Answer 7

除上述问题外，添加新图片资源时，需要冷加载才能显示新资源。如果这没有帮助，flutter clean 应该可以解决问题。

Answer 8

转到工具 -> Flutter -> Flutter Clean 然后重新运行项目（不是热重载）

通过这两个步骤我可以解决同样的问题。如果 pupspec.yaml 文件按规则缩进。

Answer 9

关闭模拟器
在您的终端中输入“flutter clean”（不带引号）。
运行再次使用您的应用程序。
它适合你。

Answer 10

不太确定，但可以解决问题：

如果一个widget使用根目录而另一个widget使用子目录，通常会导致CODEC问题。
避免在pubspec.yaml文件中使用子目录（例如“-images/”），例如避免使用：
```
flutter:   
  uses-material-design: true

  assets:
    - images/ 
```

代替使用：

flutter:

  uses-material-design: true

  assets:

    - 'FILENAME WITH ITS EXTENSION'

Answer 11

请确保您将该资产包含在 pubspec.yaml 文件中，如下所示

     # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/icon-48.png
    - assets/images/icon-480.png
    - assets/images/icon-400.png
    - assets/images/qr.png
    - assets/images/bulb.png
    - assets/images/google_logo.png

Answer 12

同样的事情发生在我身上，我花了将近两个小时才看到错误，答案很简单。

在assets目录中，我忘记放正斜线(/)因为我不想加载图像。

Answer 13

哇，来这里是为了寻找预期的结果，因为这不是编解码器问题，并得到了一大堆答案。我从文档中发现了什么。为了进一步说明，该目录应该在项目根目录中，而不是在 src 或 lib 下。

在pubspec.yaml

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

要包含目录下的所有资产，请在末尾指定带有 / 字符的目录名称：

flutter:
  assets:
    - directory/
    - directory/subdirectory/

假设我做了以下事情；其中图像目录有多个。

flutter:
  assets:
    - assets/images/

我的项目结构简化为

projectName
  ...
  lib
  pubspec.yaml
  assets
    images
      file1.png
      etc...
  ...

然后在小部件中执行（提示*需要完整路径...）我想如果资产已经有了 PATH 在应用程序上下文中的路径。这是我的错误。然后做一个 flutter clean，运行它应该可以正常工作。

  @override
  Widget build(BuildContext context) {
    return Image(image: AssetImage('assets/images/file1.png')),
  }

Answer 14

我也遇到了这个问题。我只是热重启了我的应用程序而不是热重载，它成功了！！！

Answer 15

为此浪费了 3 个小时。最后我意识到我必须将“资产”的东西移到 yaml 文件的最底部并将它粘贴到最后的 flutter 下：在 assets: 之前使用 2 个空格，在 - assets/

之前使用 4 个空格

Answer 16

我是飞镖和编程方面的超级新手。所以我被这件事折磨了好几天。 :-(

遵循来自各种网站和答案的每一个步骤。但可以修复它。

过了一会儿... 我发现我的“analysis_options.yaml”是完全错误的。

  rules:
    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
    prefer_typing_uninitialized_variables: false
    prefer_const_constructors_in_immutables: false
    prefer_const_constructor: false
    avoid_print: false
    prefer_const_literals_to_create_immutables: false

我在对齐这些东西时出错了。根据规则，我需要在每个 prefer_... 对我来说，他们被粘在左边。我让它们与双空格对齐，所有东西都清除了。

希望有人能得到帮助。

未加载 Flutter 图像（例外：解析图像编解码器）

Flutter images not loaded (EXCEPTION: resolving an image codec)

image

codec

dart

flutter

日志

颤动医生