ChatGPT解决这个技术问题 Extra ChatGPT

FlutterError:无法加载资产

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

.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(无法加载资产: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 毫秒] I/颤振(6489):══╡ 图像资源服务发现异常╞══════════════════════════════════ ════════════════════════ [+9 ms] I/flutter(6489):抛出以下断言解析图像编解码器:[+2 ms ] I/flutter(6489):无法加载资产:images/pizza0.png [+2 ms] I/flutter(6489):[+1 ms] I/flutter(6489):抛出异常时,这是堆栈:[+2 ms] I/flutter(6489):#0 PlatformAssetBundle.load(包: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/painti ng/image_cache.dart:143:20) [+3 ms] I/flutter (6489): #5 ImageProvider.resolve。 (包:flutter/src/painting/image_provider.dart:267:63)[+3 ms] I/flutter(6489):(从包 dart:async 中删除 8 帧)[+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(),名称:“images/pizza0.png”,[+1 ms] I/flutter(6489):规模:1.0)[+2 ms] I/flutter(6489):═════ ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

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

d
diegoveloper

您应该考虑 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 获取失败(65)退出代码 65
资产前 2 个空格(或 1 个制表符)和 - 图像前 4 个空格(或 2 个制表符)...
原来“uses-material-design: true”是这里的罪魁祸首。将其注释掉,或更改该部分的缩进使其工作。似乎是一个奇怪的疏忽/错误,字体工作得很好,但资产却没有。
Matthias 上面的评论对我有用,但我应该注意,即使设置为 true,我的一些资产仍然有效,而其他资产则没有。看起来这只是颤振端不正确的东西。
当我开发我的第一个具有依赖关系的应用程序时,我也遇到了同样的问题。在 pupspec.yaml 中。这些是敏感的。这对我来说是一个解决方案。
y
yathavan

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

More about this error


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

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

flutter:

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

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

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

最佳答案,不需要添加文件名。
很高兴我能帮上忙 :)
在我的情况下工作
出于某种原因,这对我不起作用。我必须导入每一个图像才能工作,我有成千上万的图像。
我刚刚检查了一下,它似乎从 stable 2.5.2 开始工作,如果你能分享你的 pubspec.yaml 作为要点,我很想看看
D
Deepak Jha

为了我,

颤抖干净,重新启动android工作室和模拟器,在我的图像图像中给出完整的路径:AssetImage('./lib/graphics/logo2.png'),宽度:200,高度:200,);

这三个步骤成功了。


A
Alexandre Jean

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

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

flutter:

  assets:
    - assets

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

flutter:

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

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


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

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

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

imageCache.clear();

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

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


请指定它的作用以及在哪里使用它,这完成了你的答案:)
@James Allen:你绝对是个天才。要弄清楚这一点,你是个聪明人。
M
Mahinthan177

在 pubspec.yaml 中,不要使用 TAB!

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

例子:

flutter:
  assets:
    assets/

这对我有用,尝试了上面的所有答案,这就是修复它的原因。哈哈。
U
Umer Waqas CEO Fluttydev

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

这种错误的方式

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

正确的

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

A
Arinzehills

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


重新运行应用程序即可解决问题。我浪费了我 10m 的时间,忽略了这个答案并继续尝试检查语法+制表符/空格等。:P
A
Amit Kumar

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

flutter clean

在这次运行之后

flutter pub get

确保输入“/”,例如“assets/icons/”而不是“assets/icons”
D
Dharman

我有一个类似的问题,我在这里修复:

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

之后,执行:

Flutter Clean

K
KenChoi

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

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


g
genericUser

就我而言,重新启动没有帮助。

我不得不卸载该应用程序,然后再次运行所有内容。

它确实奏效了!


关于颤动的最糟糕的事情之一,每次加载图像都需要 35 分钟
Y
YMG

在您完成所有操作但仍然无法正常工作后,请尝试:

flutter clean
flutter pub get

有时更新 pubspec.yaml 文件后,它无法运行 pub get 虽然它显示它正在运行。

试试上面的命令


G
Good man

您应该以资产字开头的图像路径:

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

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


A
Ankur Lahiry

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

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


S
SandaliTP

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

正确的方法如下所述。不要使用 Tab 键来保留空格。相反,请使用空格键。

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

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

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

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


N
Neail

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

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

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

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

https://i.stack.imgur.com/qgjUR.png

https://i.stack.imgur.com/r6Ts9.png


H
Hieu Vo

如果一切正常,正确的路径,正确的 pubspec 空间等,最后可能导致这种情况的是缓存。您可以关闭模拟器并再次启动您的应用程序,这对我的情况有所帮助。


B
Babao

显然存在某种颤振错误。这是我的目录结构:

<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/”作为前缀。


d
defemz

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


M
Miki

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

代替

AssetImage('images\heart.png')

利用

AssetImage('images/heart.png')

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


r
rickb

混合中的另一个答案:

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

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

并在调用代码中:

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

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

但是,无论我尝试什么,图像都不会加载。检查并仔细检查缩进间距、拼写、调用 flutter cleanflutter 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 中,因为它符合我的感受,但如果这次重组能让我继续前进,我会接受它。


G
Gerard Roche

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

https://i.stack.imgur.com/hHWBM.png


H
Hecucent Bryant

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


S
Shobhakar Tiwari

2019 年 12 月 25 日:

谁遇到关于图像未在 Flutter 中显示的问题,让我给你简单的检查点:

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

第一点很重要


P
Parthasarathy S

即使在 yaml 文件中的 flutter clean(删除构建文件夹)和 正确缩进之后,这个问题仍然存在

它自己修复了,因为它可能是与 Android Studio 相关的问题。

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

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

例如:从 Nexus 6 到 Pixel 模拟器

——快乐编码!


S
Soropromo

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

'assets/images/about_us.png' 

而不仅仅是 images/..

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


R
Rakesh Verma

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

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

我将此名称更新为 comboclr_emtpy_no_circle.png


D
DroidOS

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


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅