FlutterError：无法加载资产

时间：2018-12-06 21:17:48

标签： flutter assets

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

.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

此yaml文件没有任何错误，运行“ flutter包获取”给出的退出代码为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（无法加载资产：   images / 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 /颤动（6489）：IM图像资源引起的异常   服务╞════════════════════════════════════════════════ ════[+9   ms] I / flutter（6489）：抛出了以下断言，以解决   图像编解码器：[+2毫秒] I / flutter（6489）：无法加载资产：   images / pizza0.png [+2毫秒] I /颤动（6489）：[+1毫秒] I /颤动（   6489）：引发异常时，这是堆栈：[+2毫秒]   I /颤振（6489）：＃0 PlatformAssetBundle.load   （package：flutter / src / services / asset_bundle.dart：221：7）[+1毫秒]   I /颤振（6489）：[+1毫秒] I /颤振（   6489）：＃1 AssetBundleImageProvider._loadAsync   （package：flutter / src / painting / image_provider.dart：429：44）[+1毫秒]   I /颤振（6489）：[+1毫秒] I /颤振（   6489）：＃2 AssetBundleImageProvider.load   （包：flutter / src / painting / image_provider.dart：414：14）[+1毫秒]   I / flutter（6489）：＃3 ImageProvider.resolve ..   （软件包：flutter / src / painting / image_provider.dart：267：86）[+4毫秒]   I / flutter（6489）：＃4 ImageCache.putIfAbsent   （package：flutter / src / painting / image_cache.dart：143：20）[+3毫秒]   I / flutter（6489）：＃5 ImageProvider.resolve。   （package：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，名称：“ images / pizza0.png”）[+3毫秒]   I / flutter（6489）：映像键：AssetBundleImageKey（bundle：   PlatformAssetBundle＃20fc8（），名称：“ images / pizza0.png”，[+1毫秒]   I /颤振（6489）：比例：1.0）[+2 ms] I /颤振（6489）：   ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

34 个答案:

答案 0 :(得分：10)

对我来说

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

  3. 我的形象得到了充分体现

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

这三个步骤可以解决问题。

答案 1 :(得分：7)

您应该考虑缩进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

答案 2 :(得分：6)

遇到相同问题的代码略有不同。就我而言，我使用的是“资产”文件夹，该文件夹又分为资产（子画面，音频，UI）的子文件夹。

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

flutter:

  assets:
    - assets

压痕和颤动清洁不足以对其进行修复。 子文件夹中的文件未通过抖动加载。似乎需要“用手抓住”颤动，并且在未明确要求其查看子文件夹的情况下也不要看它们。这对我有用：

flutter:

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

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

答案 3 :(得分：5)

在pubspec.yaml内部，请勿使用标签！

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

示例：

flutter:
  assets:
    assets/

答案 4 :(得分：3)

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

答案 5 :(得分：3)

就我而言，重新启动没有帮助。我必须卸载该应用程序，然后再次运行所有内容。它确实奏效了！

答案 6 :(得分：2)

  1. 您应该使用资产字词
    2. 开头图片路径

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

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

答案 7 :(得分：2)

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

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

完成后：Flutter Clean

答案 8 :(得分：2)

实际上问题出在pubspec.yaml中， 我将所有图像都放在assets/images/和

这种错误的方式

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

正确 

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

答案 9 :(得分：1)

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

这里是一个例子：

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

要在目录下包含所有资产，请在目录名末尾添加/字符：

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

有关更多信息，请参见https://flutter.dev/docs/development/ui/assets-and-images

答案 10 :(得分：1)

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

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

答案 11 :(得分：1)

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

代替

AssetImage('images\heart.png')

使用

AssetImage('images/heart.png')

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

答案 12 :(得分：1)

养成在 Flutter 项目中加载图片时遇到困难时检查 pubspec.yaml 的习惯。大多数时候，问题出在它身上。

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

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

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

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

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

答案 13 :(得分：1)

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

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

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

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

code

yaml

答案 14 :(得分：1)

我也遇到了这个问题，并且解决了这个问题：

imageCache.clear();

答案 15 :(得分：1)

使用

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

为我工作， 需要在puspec.yaml文件中指定相对图片路径

答案 16 :(得分：0)

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

答案 17 :(得分：0)

如果您按照提示更改了缩进部分中的所有内容并检查了拼写错误，但仍然出现错误，那么您应该执行此简单操作，这对我有用，并且似乎几乎所有人都忽略了这< / strong>

即使资产后的间距正确：您仍然可能会误认为这是一件错误的事

按此顺序保留缩进

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

因此它应该看起来像这样

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

答案 18 :(得分：0)

此错误发生在 pubspec.yaml 中的图像未正确更新时

按照步骤添加一张图片到 flutter:

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

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

3) 打开 pubspec.yaml 文件 create a assets dependency and add a images which are already available in assets folder and run command from terminal pubget or press ctrl+s to save it will run and update,or press the download arrow which appears in top to update, once updated successfully in output console you can see exitcode 0.。

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

答案 19 :(得分：0)

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

 assets:
    - assets/sub_folder/

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

答案 20 :(得分：0)

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

答案 21 :(得分：0)

我的问题是嵌套文件夹。

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

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

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

答案 22 :(得分：0)

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

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

答案 23 :(得分：0)

我遇到了这个问题，几乎迷失了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中遇到神秘资产加载失败的人。

答案 24 :(得分：0)

我也面临着同样的问题。我这边的问题是，映像名称的名称之间有空格，因此我使用不带空格的新名称更新了映像名称。

造成错误的图片名称是comboclr emtpy no circle.png

我将此名称更新为comboclr_emtpy_no_circle.png

答案 25 :(得分：0)

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

'assets/images/about_us.png'

不仅仅是images/..

在这样的琐碎错误上浪费了2个小时后为我工作。

答案 26 :(得分：0)

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

它本身已得到修复，因为它可能是与Android Studio有关的问题。

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

修复2 ）作为解决方法，更改了模拟器虚拟设备后，

例如：从Nexus 6到Pixel模拟器

-编码愉快！

答案 27 :(得分：0)

2019年12月25日：

面对有关图像无法在Flutter中显示的问题，让我给您提供简单的检查点：

  1. Image.asset（'assets / images / photo1.png'）; -请确保在资产前不要使用/（正斜杠）。
  2. 始终请清除YAML文件，不要使用空格，而应使用TAB。
  3. YAML文件添加资产条目。如以上评论所述。

第一点很重要

答案 28 :(得分：0)

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

答案 29 :(得分：0)

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

More about this error

答案 30 :(得分：0)

您只需指定图像文件夹的路径即可，而不必指定每个图像。
请确保您使用正确的缩进，因为pubspec.yaml是缩进敏感的。

flutter:

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

，您可以简单地以

的形式访问每个图像 
  new Image.asset('images/pizza1.png',width:300,height:100)

答案 31 :(得分：-1)

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

答案 32 :(得分：-1)

我有一个与我更正的问题相同，您只需要将两个（uses-material-design：true和asset）放在同一列中，然后单击升级依赖项即可，然后重新启动android studio。

screenshot

答案 33 :(得分：-3)

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

相关问题
最新问题