FlutterError: Unable to load asset

Question

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

.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:

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 似乎构建得很好，但是当应用程序在我的 phone 上打开时，我在 asset_bundle.dart 中收到以下错误：

Exception has occurred. FlutterError (Unable to load asset: images/pizza0.png)

asset_bundle.dart 文件中的 class 引发错误：

/// 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 Explorer 和 VS Code 中都是可见的。字体资源加载没有问题。

这是我在运行 Flutter 运行 -v:

时得到的输出

[+1068 ms] I/flutter ( 6489): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ [ +9 ms] I/flutter ( 6489): The following assertion was thrown resolving an image codec: [ +2 ms] I/flutter ( 6489): Unable to load asset: images/pizza0.png [ +2 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): When the exception was thrown, this was the stack: [ +2 ms] I/flutter ( 6489): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:429:44) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:414:14) [ +1 ms] I/flutter ( 6489): #3 ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86) [ +4 ms] I/flutter ( 6489): #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20) [ +3 ms] I/flutter ( 6489): #5 ImageProvider.resolve. (package:flutter/src/painting/image_provider.dart:267:63) [ +3 ms] I/flutter ( 6489): (elided 8 frames from package dart:async) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): Image provider: AssetImage(bundle: null, name: "images/pizza0.png") [ +3 ms] I/flutter ( 6489): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#20fc8(), name: "images/pizza0.png", [ +1 ms] I/flutter ( 6489): scale: 1.0) [ +2 ms] I/flutter ( 6489): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 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

Answer 2

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

flutter:

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

您可以简单地访问每张图片

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

Answer 3

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

More about this error

Answer 4

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

Answer 5

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

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

之后，做：

Flutter Clean

Answer 6

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

这都是猜测，因为我遇到了同样的问题，在应用程序启动时调用一次就解决了我的问题：

imageCache.clear();

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

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

Answer 7

这个问题过去几乎让我抓狂。为了支持其他人所说的，在确保已更正 yaml 文件上的所有缩进并且问题仍然存在之后，运行在 Android 工作室的终端上执行 'flutter clean' 命令。在 flutter 1.9 中，这应该可以解决问题。

Answer 8

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

Answer 9

2019 年 12 月 25 日：

如果遇到图片在 Flutter 中不显示的问题，让我给你简单的检查点：

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

第一点很重要

Answer 10

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

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

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

修复 2) 更改仿真器虚拟设备 作为解决方法后，

例如：从 Nexus 6 到 Pixel 模拟器

--编码愉快！

Answer 11

在 pubspec.yaml 中正确声明后，考虑给出图像的完整路径，例如

'assets/images/about_us.png'

而不只是 images/..

在这样一个微不足道的错误上浪费了 2 个小时后，对我有用。

Answer 12

我也遇到了同样的问题。我这边的问题是图像名称在其名称之间有 space 所以我用没有任何 space.

的新名称更新了图像名称

创建错误的图像名称是 comboclr emtpy no circle.png

我将此名称更新为 comboclr_emtpy_no_circle.png

Answer 13

对我来说，

flutter clean,
重新启动 android 工作室和模拟器，

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

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

这三个步骤成功了。

Answer 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 异步操作引起的。为了 return 它的结果正确，我们需要 await 它们的可用性，而我没有做到。令我感到有些惊讶的是，Flutter VSCode 插件和 Flutter 构建过程都没有将此标记为错误。虽然 rootBundle.load 失败可能还有其他原因，但希望这个答案能帮助其他运行陷入 Flutter 中神秘资产加载失败的人。

Answer 15

遇到了相同的问题，但代码略有不同。在我的例子中，我使用了一个 "assets" 文件夹，该文件夹被细分为资产子文件夹（精灵、音频、UI）。

我的代码最初只是在 pubspec.yaml- 替代方法是详细说明每个文件。

flutter:

  assets:
    - assets

缩进和 flutter clean 不足以修复它。 子文件夹 中的文件未通过 flutter 加载。似乎 flutter 需要 "taken by the hand" 而不是在没有明确要求它查看子文件夹的情况下查看它们。这对我有用：

flutter:

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

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

Answer 16

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

这条路错了

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

正确

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

Answer 17

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

Answer 18

inside pubspec.yaml, DON'T USE TAB!

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

示例：

flutter:
  assets:
    assets/

Answer 19

您应该以 assets 单词开始图片路径：

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

您必须在 pubspec.yaml

Answer 20

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

我运行 flutter clean & 然后重新启动了 Android Studio。好像flutter packages缓存了asset文件夹，开发者在项目中添加新图片时没有更新缓存的机制（个人想法）。

Answer 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文件夹中有sub-directories，那么要包含一个目录下的所有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

Answer 22

我的问题是嵌套文件夹。

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

您必须明确添加每个嵌套的子文件夹

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

Answer 23

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

 assets:
    - assets/sub_folder/

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

Answer 24

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

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

保持缩进顺序

颤振： <2_spaces>资产： - assets/images/image.png

因此它应该看起来像这样

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

Answer 25

就我而言，重启没有帮助。

我不得不卸载应用程序，然后运行再次。

确实有效！

Answer 26

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

Answer 27

如果您正在开发 flutter 包，请像这样在图像路径后添加包参数：

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

这是 flutter 文档中的 link https://flutter.dev/assets-and-images/#from-packages

Answer 28

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

而不是

AssetImage('images\heart.png')

使用

AssetImage('images/heart.png')

可能是Windows版Flutter的bug。它解决了我的问题。

Answer 29

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

正确的做法如下。不要使用 Tab 键来保留空格。相反，请使用 Space 栏。

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

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

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

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

Answer 30

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

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

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

第一个图像是代码，第二个图像是 yaml。

Answer 31

我只是重新运行我的应用程序而不是热重载。

Answer 32

当图像在 pubspec.yaml

中未正确更新时会发生此错误

按照以下步骤将图像添加到 flutter 中：

1) 在项目中创建资产文件夹（代替您可以根据需要创建的资产，如图像或其他）。

2) 将图像添加到资产文件夹中（或将图像拖放到资产中）。

3) 打开 pubspec.yaml 文件 .

按照上图：创建资产依赖项并添加资产文件夹中已有的图像和来自终端 pubget 的运行命令或按 ctrl+s 保存它将运行和更新图片，或者按顶部出现的下载箭头来更新图片，一旦更新成功，在输出控制台中你可以看到退出代码 0.

Answer 33

使用

Image.asset( 'assets\images\logo.png')

对我有用，需要在puspec.yaml文件

中指定相对图像路径

Answer 34

如果一切正常，路径正确，pubspec 空间正确等，则可能导致此问题的最后一件事是缓存。您可以关闭模拟器并重新启动您的应用程序，这对我的情况有帮助。

Answer 35

混合中的另一个答案：

我的 pubspec.yaml 看起来像这样：

flutter:
  assets:
    - assets/us_defs/
    - assets/eu_defs/
    - assets/images/

在调用代码中：

Center(
  child: Image(
    image: AssetImage('assets/images/<name.png>')
  )
)

（*_defs 文件夹包含 json 个用于各种其他目的的文件，我可以很好地加载它们。）

但是，无论我如何尝试，图像都无法加载。检查并仔细检查缩进间距、拼写、调用 flutter clean 和 flutter pub get、冷启动应用程序等。尝试引用 'images/<name.png>' 与 'assets/images/<name.png>'.

纳达

最后，我将images文件夹提升到项目文件夹下的顶层：

flutter:
  assets:
    - assets/us_defs/
    - assets/eu_defs/
    - images/    <-- now a top level folder

在调用代码中：

Center(
  child: Image(
    image: AssetImage('images/<name.png>');
  )
)

...这奏效了。

我不知道为什么。

现在，我宁愿将 images 文件夹保留在 assets 中，因为它符合我的感受，但如果这次重组让我继续前进，我会接受它。

Answer 36

完成所有操作后仍然无法正常工作，请尝试：

flutter clean
flutter pub get

有时在更新 pubspec.yaml 文件后，它不能运行 pub get 虽然它显示它是运行ning.

尝试上面的命令

Answer 37

有时缓存会产生问题，所以首先运行

flutter clean

在此之后运行

flutter pub get

Answer 38

显然存在某种 flutter 错误。这是我的目录结构：

<project>/assets/images/myimage.png

这是我在 pubspec.yaml 中的内容：

flutter:

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

这就是它过去的工作方式，并且在我为 web 编译时仍然有效：

const DecorationImage(image: AssetImage("images/myimage.png")

但只有当我像这样为 ios 编译时它才会起作用：

const DecorationImage(image: AssetImage("assets/images/myimage.png")

幸运的是，添加“assets/”作为前缀现在适用于所有情况。

Answer 39

在我的例子中，我不得不在 iOS 目录中再次运行 pod install

Answer 40

对于 Android Studio Bumblebee 2021.1.1：如果您将 pubspec.yaml 文件中的资产路径设置为 'images/' 或您喜欢的任何命名，则

flutter clean

或者您可以前往 Tools -> Flutter -> Flutter clean

& 然后 hot-restart 应该可以解决问题。

Answer 41

我遇到了同样的问题，但我在 pubspec.yaml 中没有发现问题。但是，重新启动 vscode 对我有用

FlutterError: Unable to load asset

FlutterError: Unable to load asset

assets

flutter

我不得不卸载 应用程序，然后运行 再次。

我不得不卸载应用程序，然后运行再次。