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

Posted 2023-02-23

【中文标题】未加载颤振图像（例外：解析图像编解码器）

【英文标题】：Flutter images not loaded (EXCEPTION: resolving an image codec)

【发布时间】：2018-10-12 08:16:06

【问题描述】：

当我尝试运行未正确加载的图片资源时，我遇到了异常：

在解析图像编解码器时引发了以下断言：无法加载资产：/images/p8.png`

几周前它还在工作，现在它停止了。我也尝试从不同的 pc 和 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

颤振医生

颤振医生-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!

【问题讨论】：

哪个目录包含images目录？

images目录在哪里的问题，仍然没有答案。

它们在项目根目录的 images 文件夹中，抱歉回复晚了

您是否在加载图像的代码中使用了以下答案中指出的前导 /？

是的，我的错。 :(

【参考方案1】：

在你的 png 路径中​​去掉前面的 /。应该是images/p8.png。

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

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

【参考方案2】：

需要注意的一点是“assets:”标签必须与“flutter:”标签正确缩进，但它只会在加载资产时偶尔抛出错误。所以这行不通：

flutter: 
assets:
    - images/

但这会：

flutter: 
  assets:
    - images/

【讨论】：

为什么flutter没有表明它实际上是这样的？

【参考方案3】：

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

在 Android Studio 中，

工具->Flutter->Flutter Clean

【参考方案4】：

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

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

【讨论】：

无法执行此操作，即使在升级后也是如此。这是推出了什么版本？

【参考方案5】：

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

【讨论】：

您能推荐一个“图像查看器”吗？

我自己用的是 Windows 图像查看器

我有一个正常的 .png 文件，可以作为图像文件正常打开，但 Flutter 抛出了这个（例外：解析图像编解码器）。我将它导出为 .jpg 然后 Flutter 显示它。我想知道 Flutter 支持哪些编解码器，以及如何支持所有属于 .png 文件类型的标准编解码器

对我来说奇怪的是，有时我的 png 已加载，但其他的却没有。它往往会抛出这个异常，特别是在应用程序运行开始时

【参考方案6】：

除了其他提到的问题外，当添加新的图像资源时，需要冷重新加载以显示新资源。如果这没有帮助，flutter clean 应该可以解决问题。

【参考方案7】：

转到工具 -> 颤振 -> 颤振清洁 然后重新运行项目（不是热重载）

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

【参考方案8】：

关闭模拟器

在终端中输入“flutter clean”（不带引号）。

再次运行您的应用程序。

它会为你工作的。

【讨论】：

这是大多数其他答案已经说明的内容。重复的答案不应发布，将被删除。 From Review.

谢谢！！！！这解决了我的问题，我正在尝试一切。原来我只需要运行 flutter clean XD 谢谢

【参考方案9】：

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

在 pubspec.yaml 中

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

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

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

假设我做了以下事情； images 目录有多个。

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')),
  

【参考方案10】：

我在 Windows 10 上开发，而不是 MAC OS X 或 Linux 我有同样的问题......事实上，我的解决方案只是改变 unix 之类的路径分隔符：'/'由一个用于 windows 环境的：'\' 在 dart/flutter 文件中

所以在 pubspec.yaml images/mypicture.jpg 在 dart 文件中：当你的对象实例化时：

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

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

希望它能帮助许多基于 Flutter 的 Windows 平台开发者

这使它可以在 Android 模拟器上运行，但 在物理移动设备上我想您需要在打包之前使用斜杠以另一种方式进行更改/尝试两者...

【参考方案11】：

要将资产添加到您的应用程序，请添加一个资产部分，如下所示：

  assets:
    - assets/test.jpeg

您应该只使用文件夹名称作为资产，因为它是 Flutter ImageProvider 类的默认设置，然后在终端上键入 flutter clean 并重新启动应用程序

【讨论】：

你拯救了我的一天，谢谢。

【参考方案12】：

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

【参考方案13】：

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

如果一个小部件使用根目录而另一个小部件使用子目录，这通常会导致 CODEC 问题。

避免在pubspec.yaml文件中使用子目录（如“-images/”），例如避免使用：

flutter:   
  uses-material-design: true

  assets:
    - images/ 

替代使用：

flutter:

  uses-material-design: true

  assets:

    - 'FILENAME WITH ITS EXTENSION'  

【参考方案14】：

请确保您将该资产包含在这样的 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

【参考方案15】：

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

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

【讨论】：

最好使用code blocks而不是图像来共享代码sn-ps。使用代码块，可以轻松读取和共享 sn-ps。如果您可以解释您的答案如何或为什么解决了问题，这也会很有帮助。以下是有关如何写好答案的其他提示***.com/help/how-to-answer