FlutterError：无法加载资产

【问题标题】：FlutterError: Unable to load assetFlutterError：无法加载资产
【发布时间】：2019-05-08 15:30:34
【问题描述】：

这是我的应用程序的文件夹结构

.idea
.vscode
android
build
fonts
 Oxygen-Bold.tff
 Oxygen-Light.tff
 Oxygen-Regular.tff
images
 pizza0.png
 pizza1.png
ios
lib
 ui
  home.dart
 main.dart
test
.gitignore
.metadata
.packages
app_widgets.iml
pubspec.lock
pubspec.yaml
README.md

在我的pubspec.yaml 文件中，我像这样加载字体和资源

flutter:

uses-material-design: true

assets:
  - images/pizza0.png
  - images/pizza1.png

fonts:
  - family: Oxygen
    fonts:
      - asset: fonts/Oxygen-Regular.ttf
      - asset: fonts/Oxygen-Bold.ttf
        weight: 700
      - asset: fonts/Oxygen-Light.ttf
        weight: 300

我没有收到此 pubspec.yaml 的任何错误，运行 flutter packages get 给出的退出代码为 0。

在我的 home.dart 中，我有以下课程：

class PizzaImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AssetImage pizzaAsset = AssetImage('images/pizza0.png');
    Image image = Image(image: pizzaAsset, width: 400, height: 400);
    return Container(
      child: image,
    );
  }
}

我在其他地方使用的，为了显示图像（代码省略）：

        ),
        PizzaImageWidget(),
      ],

该建筑没有错误。 Flutter Doctor -v 不会给出任何错误，Flutter Analyze -v 也不会。 .apk 似乎构建得很好，但是当应用程序在我的手机上打开时，我在asset_bundle.dart 中收到以下错误：

发生了异常。 FlutterError（无法加载资产： 图片/pizza0.png)

这个类在asset_bundle.dart文件中抛出的错误：

/// An [AssetBundle] that loads resources using platform messages.
class PlatformAssetBundle extends CachingAssetBundle {
  @override
  Future<ByteData> load(String key) async {
    final Uint8List encoded = utf8.encoder.convert(Uri(path: Uri.encodeFull(key)).path);
    final ByteData asset =
        await BinaryMessages.send('flutter/assets', encoded.buffer.asByteData());
    if (asset == null)
      throw FlutterError('Unable to load asset: $key');
    return asset;
  }
}

Pizza0.png 文件和 Pizza1.png 文件都会发生这种情况。这些文件在树结构中可见，无论是在 Windows 资源管理器中还是在 VS Code 中。字体资源加载没有问题。

这是我在运行 Flutter Run -v 时得到的输出：

[+1068 ms] I/flutter (6489): ══╡ 图像资源捕获的异常 服务╞════════════════════════════════════════════════ ════ [ +9 ms] I/flutter (6489): 抛出以下断言解决 图像编解码器：[+2 ms] I/flutter（6489）：无法加载资产： 图像/pizza0.png [+2 ms] I/flutter (6489): [+1 ms] I/flutter ( 6489）：抛出异常时，这是堆栈：[+2 ms] 我/颤振（6489）：#0 PlatformAssetBundle.load （包：flutter/src/services/asset_bundle.dart:221:7）[+1 毫秒] I/颤动（6489）：[+1 ms] I/颤动（ 6489）：#1 AssetBundleImageProvider._loadAsync （包：flutter/src/painting/image_provider.dart:429:44）[+1 毫秒] I/颤动（6489）：[+1 ms] I/颤动（ 6489）：#2 AssetBundleImageProvider.load （包：flutter/src/painting/image_provider.dart:414:14）[+1 毫秒] 我/颤振（6489）：#3 ImageProvider.resolve.. （包：flutter/src/painting/image_provider.dart:267:86）[+4 毫秒] 我/颤振（6489）：#4 ImageCache.putIfAbsent （包：flutter/src/painting/image_cache.dart:143:20）[+3 毫秒] I/flutter (6489)：#5 ImageProvider.resolve。 （包：flutter/src/painting/image_provider.dart:267:63）[+3 毫秒] I/flutter（6489）：（从包 dart:async 中删除了 8 帧）[+1 ms] I/flutter（6489）：[+1 ms] I/flutter（6489）：图像提供者： AssetImage(bundle: null, name: "images/pizza0.png") [+3 ms] I/flutter（6489）：图像键：AssetBundleImageKey（捆绑： PlatformAssetBundle#20fc8()，名称：“images/pizza0.png”，[+1 ms] I/颤动（6489）：比例：1.0）[+2 ms] I/颤动（6489）： ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

【问题讨论】：

  • @diegoveloper 是的，字体可以使用，但两个图像都会出现此错误。
  • 你在 assets 关键字前使用空格吗？
  • yaml文件没问题。我在 VS Code 中有一个 yaml 扩展，它没有给出任何错误，yamlint.com 说它也很好。
  • 是的，如果您不添加缩进，但您无法获取图像，您不会收到错误
  • 我有同样的问题，我发现在构建时可能有用的警告：“错误：无法在 pubspec.yaml 中找到目录条目”

标签： flutter assets


【解决方案1】：

你应该考虑assets的缩进

flutter:

  assets:
    - images/pizza1.png
    - images/pizza0.png

更多细节：

flutter:

[2 whitespaces or 1 tab]assets:
[4 whitespaces or 2 tabs]- images/pizza1.png
[4 whitespaces or 2 tabs]- images/pizza0.png

【讨论】：

  • 如果我这样做，flutter packages get 失败：在 app_widgets 中运行“flutter packages get”... pubspec.yaml 第 40 行第 3 列出错：解析块映射时需要一个键。资产：^ pub get failed (65) exit code 65
  • 资产前 2 个空格（或 1 个制表符）和 - 图像前 4 个空格（或 2 个制表符）...
  • 原来“uses-material-design: true”是这里的罪魁祸首。将其注释掉，或更改该部分的缩进使其工作。似乎是一个奇怪的疏忽/错误，字体像那样工作得很好，但资产却不行。
  • Matthias 上面的评论对我有用，但我应该注意，即使设置为 true，我的一些资产仍然有效，而其他资产则没有。看起来它只是颤振端的不正确。
  • 我在开发我的第一个具有依赖性的应用程序时也遇到了同样的问题。在 pupspec.yaml 中。这些是敏感的。这对我来说是一个解决方案。
【解决方案2】：

最简单的方法是引用您的资产文件夹而不是资产本身，只需确保使用正确的缩进，因为pubspec.yaml 是缩进敏感的。

flutter:

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

您可以简单地访问每个图像

  new Image.asset('images/pizza1.png',width:300,height:100)

【讨论】：

  • 最佳答案，不需要添加文件名。
  • 很高兴我能帮上忙 :)
  • 在我的情况下工作
  • 出于某种原因，这对我不起作用。我必须导入每一张图片才能正常工作，而且我有成千上万张。
【解决方案3】：

我也有同样的问题。我刚刚运行"$ flutter clean"，然后一切正常。

More about this error

【讨论】：

  • 谢谢。这是我的问题。其实我也有错误的缩进。所以人们应该检查他们的缩进并运行flutter clean。
  • 颤振清洁工作。我想知道为什么 pubspec.yml 更改不会自动运行 flutter clean
  • 来自 Android Studio，在我的情况下，问题只会在使用热重载时发生。通过按下 STOP 按钮触发重建，然后 PLAY 按钮解决了它（我正在使用集成的 Android 模拟器）
  • @Michele 我和你在一起。我不得不进行热重启。解决了它
  • 运行flutter clean后重启Android Studio。为我工作。
【解决方案4】：

我遇到了同样的问题，我更正了，你只需要将两者（uses-material-design: true 和 assets）放在同一列中，然后在重新启动 android studio 之前单击升级依赖项。

【讨论】：

    【解决方案5】：

    我遇到了类似的问题，我在这里解决了：

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

    之后，做：

    Flutter Clean

    【讨论】：

      【解决方案6】：

      我也有这个问题。我认为 Flutter 缓存图像的方式存在错误。我的猜测是，当你第一次尝试加载 pizza0.png 时，它不可用，并且 Flutter 已经缓存了这个失败的结果。然后，即使添加了正确的图像，Flutter 仍然认为它不可用。

      这都是猜测，基于我遇到同样问题的事实，并且在应用启动时调用一次为我解决了问题：

      imageCache.clear();

      这会清除图像缓存，这意味着 Flutter 将尝试重新加载图像而不是搜索缓存。

      PS 我还发现，每当您更改任何现有图像时，您都需要调用它，出于同样的原因 - Flutter 将加载旧的缓存版本。另一种方法是重命名图像。

      【讨论】：

      • 请说明它的作用以及在哪里使用它，这样你的答案就完成了:)
      • @James Allen：你绝对是个天才。要弄清楚这一点，你是个聪明人。
      【解决方案7】：

      过去，这个问题几乎让我发疯。为了支持其他人所说的，在确保 yaml 文件上的所有缩进都已更正并且问题仍然存在之后，在 Android Studio 的终端上运行“flutter clean”命令。在颤振 1.9 中，这应该可以解决问题。

      【讨论】：

        【解决方案8】：

        确保文件名不包含特殊字符，例如 ñ

        【讨论】：

          【解决方案9】：

          2019 年 12 月 25 日：

          谁遇到图像未在 Flutter 中显示的问题，让我给你简单的检查点：

          1. Image.asset('assets/images/photo1.png'); -- 这里请确保不要在资产前使用 /（正斜杠）。
          2. YAML 文件总是清楚的不要使用空格，而是使用 TAB。
          3. YAML 文件添加资产条目。如上评论所述。

          第一点很重要

          【讨论】：

            【解决方案10】：

            即使在我的情况下，这个问题仍然存在， flutter clean（删除构建文件夹）和 yaml 文件中的正确缩进

            它已自行修复，因为它可能是与 Android Studio 相关的问题。

            Fix 1) 在Cold Boot模式下重启模拟器，在Android Studio中， 单击列出虚拟设备按钮后，单击下拉箭头（编辑图标旁边的最后一个图标） => 选择 Cold Boot Now 选项。如果问题仍然存在，请按照以下方式进行操作

            修复 2) 作为一种解决方法，更改模拟器虚拟设备后，

            例如：从 Nexus 6 到 Pixel 模拟器

            --愉快的编码！

            【讨论】：

              【解决方案11】：

              在 pubspec.yaml 中正确声明后，考虑给出图片 ex 的完整路径。

              'assets/images/about_us.png'

              而不仅仅是images/..

              在这样一个微不足道的错误上浪费了 2 个小时后为我工作。

              【讨论】：

                【解决方案12】：

                我也面临同样的问题。我这边的问题是图像名称在其名称之间有空格，所以我用没有任何空格的新名称更新了图像名称。

                产生错误的图像名称是 comboclr emtpy no circle.png

                我将此名称更新为 comboclr_emtpy_no_circle.png

                【讨论】：

                  【解决方案13】：

                  对我来说，

                  1. flutter clean,
                  2. 重启android studio和模拟器​​，

                  3. 在我的图像中给出完整的路径

                    image: AssetImage(
  './lib/graphics/logo2.png'
   ),
   width: 200,
   height: 200,
 );

                  这三个步骤成功了。

                  【讨论】：

                    【解决方案14】：

                    我遇到了这个问题，几乎放弃了 Flutter，直到我偶然发现了原因。就我而言，我正在做的是以下几行

                    static Future<String> resourceText(String resName) async
{
 try
 { 
  ZLibCodec zlc = new ZLibCodec(gzip:false,raw:true,level:9);
  var data= await rootBundle.load('assets/path/to/$resName');
  String result = new 
  String.fromCharCodes(zlc.decode(puzzleData.buffer.asUint8List()));
  return puzzle;
 } catch(e)
 {
  debugPrint('Resource Error $resName $e');
  return ''; 
 } 
}

static Future<String> fallBackText(String textName) async
{
 if (testCondtion) return 'Some Required Text';
 else return resourceText('default');
}

                    其中 Some Required Text 是在满足 testCondition 时发回的文本字符串。失败，我试图从应用程序资源中获取默认文本并将其发回。我的错误出现在return resourceText('default'); 行中。将其更改为 return await resourceText('default') 后，一切正常。

                    这个问题是由rootBundle.load 异步操作引起的。为了正确返回其结果，我们需要await 他们的可用性，这是我未能做到的。 Flutter VSCode 插件和 Flutter 构建过程都没有将此标记为错误，这让我有点惊讶。虽然rootBundle.load 失败的原因很可能还有其他原因，但这个答案有望帮助其他在 Flutter 中遇到神秘资产加载失败的人。

                    【讨论】：

                      【解决方案15】：

                      遇到了相同的问题，但代码略有不同。就我而言，我使用的是一个“资产”文件夹，该文件夹细分为资产（精灵、音频、UI）的子文件夹。

                      我的代码一开始只是在 pubspec.yaml 中——替代方法是详细说明每个文件。

                      flutter:

  assets:
    - assets

                      压痕和颤振清洁不足以修复它。 子文件夹中的文件未通过颤振加载。似乎颤动需要“用手”而不是在没有明确要求它查看子文件夹的情况下查看子文件夹。这对我有用：

                      flutter:

  assets:
    - assets/sprites/
    - assets/audio/
    - assets/UI/

                      所以我必须详细说明每个文件夹和每个包含资产（mp3、jpg 等）的子文件夹。这样做使应用程序正常工作并为我节省了大量时间，因为上面详述的唯一解决方案需要我手动列出 30 多个资产，而这里的代码只有几行代码并且更易于维护。 p>

                      【讨论】：

                      • 附带说明 - 如果您在 dart 文件小部件中使用 plyer.play('assets/audio/sound.mp3') 之类的代码，有些包（如音频播放器）将无法正确加载资产。而 plyer.play('audio/sound.mp3') 将正确加载。这也会造成一些非常令人沮丧的调试。所以我想添加它。
                      • 这对我有用。我有同样的问题
                      【解决方案16】：

                      其实问题出在 pubspec.yaml 中， 我把所有图片都放到assets/images/ 和

                      走错路了

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

                      正确

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

                      【讨论】：

                        【解决方案17】：

                        请提供图片文件夹中指定的准确图片名称（包括扩展名）。不匹配会触发此异常。

                        【讨论】：

                          【解决方案18】：

                          在 pubspec.yaml 中，不要使用 TAB！

                          flutter:
<space><space>assets:
<space><space><space><space>assets/

                          示例：

                          flutter:
  assets:
    assets/

                          【讨论】：

                          • 这对我有用，尝试了上面的所有答案，这就是修复它的原因。大声笑。
                          【解决方案19】：
                          1. 您应该以 assets 字样开始图像路径：

                          image: AssetImage('assets/images/pizza0.png')

                          1. 您必须在 pubspec.yaml 的新行中添加每个子文件夹

                          【讨论】：

                            【解决方案20】：

                            在我的资产文件夹中加载新图像时，我每次都遇到问题。

                            我运行 flutter clean 然后重新启动 Android Studio。似乎flutter包缓存了asset文件夹，并且当开发人员在项目中添加新图像时没有更新缓存的机制（个人想法）。

                            【讨论】：

                              【解决方案21】：

                              这个错误的原因如下。

                              1). pubspec.yaml 文件中资产的缩进错误。

                              2).没有给出正确的路径。

                              3). pubspec.yaml 文件中的额外空格

                              解决

                              Flutter 使用位于项目根目录的 pubspec.yaml 文件来识别应用所需的资产。

                              您的“assets”键应位于 flutter: 键下方

                              这是一个例子：

                              flutter:
  uses-material-design: true
  assets:
    - assets/my_icon.png
    - assets/background.png

                              如果assets文件夹中有子目录，那么要包含一个目录下的所有assets，指定目录名并以/结尾：

                              flutter:
  uses-material-design: true
  assets:
    - directory/
    - directory/subdirectory/

                              确保你的结构不是这样的

                              flutter:
  uses-material-design: true
assets:
   - images/xxx.png

                              欲了解更多信息，请参阅https://flutter.dev/docs/development/ui/assets-and-images

                              【讨论】：

                              • 缩进的主要问题。在我改变缩进之后。它没有工作。在颤抖干净的工作之后。所以尝试更多
                              【解决方案22】：

                              我的问题是嵌套文件夹。

                              我在assets/images/logo/xyz.png 中有我的图像，并认为- assets/images/ 会捕获所有子文件夹。

                              您必须显式添加每个嵌套的子文件夹

                              解决方案： - assets/images/logo/等

                              【讨论】：

                                【解决方案23】：

                                我将图像放在资产文件夹的子目录中。 每当我添加新图像时，我都会重新启动应用程序，它工作正常。

                                 assets:
    - assets/sub_folder/

                                这样做是为了不必列出每个资产名称。

                                【讨论】：

                                  【解决方案24】：

                                  好吧，如果您按照指示更改了缩进部分中的所有内容并检查了拼写错误，但仍然出现错误，那么您应该执行这个简单的操作，这对我有用，而且似乎几乎每个人都忽略了这一点

                                  即使你在资产之后有正确的间距：你仍然可能做错了这件事

                                  按此顺序保持缩进

                                  颤动： 资产： - assets/images/image.png

                                  因此它应该看起来像这样

                                  flutter:
  assets:
  - assets/images/image.png

                                  【讨论】：

                                    【解决方案25】：

                                    在我的情况下，重新启动没有帮助。

                                    我必须卸载应用程序，然后再次运行所有内容。

                                    确实有效！

                                    【讨论】：

                                      【解决方案26】：

                                      我在尝试将图像添加到较大项目中的模块时遇到了同样的错误，结果 Image.asset 小部件采用了您可以指定的 packages 参数，在指定后它工作得很好

                                      【讨论】：

                                        【解决方案27】：

                                        如果您正在开发颤振包，请在图像路径后添加包参数，如下所示：

                                        AssetImage('images/heart.png', package: 'my_icons') // my_icons is your plugin name, in flutter plugin is also a package.

                                        这是来自颤振文档的链接 https://flutter.dev/assets-and-images/#from-packages

                                        【讨论】：

                                          【解决方案28】：

                                          类似问题的另一个原因： 在 Windows 上，您不应使用 \ 符号作为目录分隔符。所以

                                          而不是

                                          AssetImage('images\heart.png')

                                          使用

                                          AssetImage('images/heart.png')

                                          这可能是 Windows 版本的 Flutter 的错误。它解决了我的问题。

                                          【讨论】：

                                            【解决方案29】：

                                            当您在 Flutter 项目中努力加载图像时，请养成检查 pubspec.yaml 的习惯。大多数时候，问题出在它身上。

                                            下面会提到正确的方法。不要使用 Tab 键来保留空格。而是使用空格键。

                                            flutter:
  uses-material-design: tru
  assets:
    - images/image1.jpg

                                            并确保在您的 dart 文件中包含相同的正确路径。

                                            • 我经常使用的一个技巧是使用非常短的名称重命名图像以避免拼写错误。

                                            希望这对面临此类问题的任何人都有帮助。

                                            【讨论】：

                                              【解决方案30】：

                                              唯一对我有用的是在代码中提到整个路径。那就是你必须在代码页上提到从根目录开始的图像路径，在 YAML 中它与顶级目录一起使用。

                                              您可能无法仅使用代码中的主目录路径，我已经尝试了很多，这是唯一有效的方法。

                                              希望它能解决问题并节省您的时间。

                                              第一张图片是代码，第二张是yaml。

                                              【讨论】：

                                                猜你喜欢
                                                • 2020-06-09
                                                • 2019-10-22
                                                • 1970-01-01
                                                • 2021-09-19
                                                • 2020-06-19
                                                • 2020-04-28
                                                • 2021-05-10
                                                • 2020-04-11
                                                相关资源
                                                最近更新 更多
                                                热门标签
                                                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode