这是我的应用程序的文件夹结构
.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):═════ ══════════════════════════════════════════════════ ══════════════════════════════════════════════════
您应该考虑 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 clean"
,然后一切正常。
flutter clean
。
flutter clean
后重新启动 Android Studio。为我工作。
最简单的方法是引用您的资产文件夹而不是资产本身,只需确保使用正确的缩进,因为 pubspec.yaml
对缩进敏感。
flutter:
uses-material-design: true
assets:
- images/
您可以简单地访问每个图像
Image.asset('images/pizza1.png', width:300, height:100)
stable 2.5.2
开始工作,如果你能分享你的 pubspec.yaml
作为要点,我很想看看
为了我,
颤抖干净,重新启动android工作室和模拟器,在我的图像图像中给出完整的路径:AssetImage('./lib/graphics/logo2.png'),宽度:200,高度:200,);
这三个步骤成功了。
遇到了同样的问题,代码略有不同。就我而言,我使用的是一个“资产”文件夹,该文件夹细分为资产(精灵、音频、UI)的子文件夹。
我的代码一开始只是在 pubspec.yaml 中——替代方法是详细说明每个文件。
flutter:
assets:
- assets
压痕和颤振清洁不足以修复它。子文件夹中的文件未通过颤振加载。似乎颤动需要“用手”而不是在没有明确要求它查看子文件夹的情况下查看子文件夹。这对我有用:
flutter:
assets:
- assets/sprites/
- assets/audio/
- assets/UI/
所以我必须详细说明每个文件夹和每个包含资产(mp3、jpg 等)的子文件夹。这样做使应用程序正常工作并为我节省了大量时间,因为上面详述的唯一解决方案需要我手动列出 30 多个资产,而这里的代码只有几行并且更易于维护。
我也有这个问题。我认为 Flutter 缓存图像的方式存在错误。我的猜测是,当您第一次尝试加载 pizza0.png
时,它不可用,并且 Flutter 已经缓存了这个失败的结果。然后,即使添加了正确的图像,Flutter 仍然认为它不可用。
这都是猜测工作,基于我遇到同样问题的事实,并且在应用程序启动时调用一次为我解决了问题:
imageCache.clear();
这会清除图像缓存,这意味着 Flutter 将尝试重新加载图像,而不是搜索缓存。
PS 我还发现每当您更改任何现有图像时都需要调用它,出于同样的原因 - Flutter 将加载旧的缓存版本。另一种方法是重命名图像。
在 pubspec.yaml 中,不要使用 TAB!
flutter:
<space><space>assets:
<space><space><space><space>assets/
例子:
flutter:
assets:
assets/
实际上问题出在 pubspec.yaml 中,我将所有图像放入 assets/images/
并
这种错误的方式
flutter:
uses-material-design: true
assets:
- images/
正确的
flutter:
uses-material-design: true
assets:
- assets/images/
我只是重新运行我的应用程序,而不是热重新加载。
有时缓存会产生问题,所以首先运行
flutter clean
在这次运行之后
flutter pub get
我有一个类似的问题,我在这里修复:
uses-material-design: true
assets:
- assets/images/
之后,执行:
Flutter Clean
如果您正在开发颤振包,请在图像路径后添加包参数,如下所示:
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
就我而言,重新启动没有帮助。
我不得不卸载该应用程序,然后再次运行所有内容。
它确实奏效了!
在您完成所有操作但仍然无法正常工作后,请尝试:
flutter clean
flutter pub get
有时更新 pubspec.yaml 文件后,它无法运行 pub get 虽然它显示它正在运行。
试试上面的命令
您应该以资产字开头的图像路径:
image: AssetImage('assets/images/pizza0.png')
您必须在 pubspec.yaml 的新行中添加每个子文件夹
在我的资产文件夹中加载新图像时,我每次都遇到问题。
我运行 flutter clean
&然后重新启动Android Studio。似乎flutter包缓存了资产文件夹,并且当开发人员在项目中添加新图像时没有更新缓存的机制(个人想法)。
当您在 Flutter 项目中努力加载图像时,请养成检查 pubspec.yaml 的习惯。大多数时候,问题在于它。
正确的方法如下所述。不要使用 Tab 键来保留空格。相反,请使用空格键。
flutter:
uses-material-design: tru
assets:
- images/image1.jpg
并确保在 dart 文件中包含相同的正确路径。
我经常使用的一个技巧是用一个非常短的名称重命名图像以避免拼写错误。
希望这对任何面临此类问题的人有所帮助。
唯一对我有用的是在代码中提到整个路径。也就是说,您必须在代码页上提及根目录的图像路径,在 YAML 中它与顶级目录一起使用。
您可能无法仅使用代码中的主目录路径,我已经尝试了很多,这是唯一有效的方法。
希望它能解决问题并节省您的时间。
第一张图片是代码,第二张是yaml。
https://i.stack.imgur.com/qgjUR.png
https://i.stack.imgur.com/r6Ts9.png
如果一切正常,正确的路径,正确的 pubspec 空间等,最后可能导致这种情况的是缓存。您可以关闭模拟器并再次启动您的应用程序,这对我的情况有所帮助。
显然存在某种颤振错误。这是我的目录结构:
<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/”作为前缀。
这个问题在过去几乎让我发疯。为了支持其他人所说的,在确保 yaml 文件上的所有缩进都已更正并且问题仍然存在之后,在 Android Studio 的终端上运行“flutter clean”命令。在颤振 1.9 中,这应该可以解决问题。
类似问题的另一个原因:在 Windows 上,您不应使用 \ 符号作为目录分隔符。所以
代替
AssetImage('images\heart.png')
利用
AssetImage('images/heart.png')
这可能是 Windows 版本的 Flutter 的错误。它解决了我的问题。
混合中的另一个答案:
我的 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
中,因为它符合我的感受,但如果这次重组能让我继续前进,我会接受它。
我遇到了同样的问题,我更正了它,您只需将两者(uses-material-design: true 和 assets)放在同一列中,然后单击升级依赖项,但在重新启动 android studio 之前。
https://i.stack.imgur.com/hHWBM.png
确保文件名不包含特殊字符,例如 ñ
2019 年 12 月 25 日:
谁遇到关于图像未在 Flutter 中显示的问题,让我给你简单的检查点:
Image.asset('assets/images/photo1.png'); - 这里确保不要在资产前使用 /(正斜杠)。 YAML 文件始终清楚不要使用空格,而是使用 TAB。 YAML 文件为资产添加条目。如上评论所述。
第一点很重要
即使在 yaml 文件中的 flutter clean
(删除构建文件夹)和 正确缩进之后,这个问题仍然存在
它自己修复了,因为它可能是与 Android Studio 相关的问题。
修复 1) 在冷启动模式下重新启动模拟器,在 Android Studio 中,单击列出虚拟设备按钮后,单击下拉箭头(编辑图标旁边的最后一个图标)=> 选择立即冷启动选项。如果问题仍然存在,请执行以下操作
修复 2) 更改模拟器虚拟设备作为解决方法后,
例如:从 Nexus 6 到 Pixel 模拟器
——快乐编码!
在 pubspec.yaml 中正确声明后,考虑给出图像 ex 的完整路径。
'assets/images/about_us.png'
而不仅仅是 images/..
在这样一个微不足道的错误上浪费了 2 个小时后为我工作。
我也面临同样的问题。我这边的问题是图像名称在其名称之间有空格,所以我用没有任何空格的新名称更新了图像名称。
创建错误的图像名称是 comboclr emtpy no circle.png
我将此名称更新为 comboclr_emtpy_no_circle.png
我遇到了这个问题,几乎放弃了 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 中遇到神秘资产加载失败的人。