使用 Flutter 加载 AssetImages

Question

我正在尝试为我的 Flutter 应用定义一些资产。

这是我的目录结构：

- lib
- assets
 - images
   └ bg_login.png <-- this one is 400x800px
   └ 2.0x
     └ bg_login.png <-- this one is 800x1600px.
- test
- ios
- android
- build
- pubspec.yaml

这是我的 pubspec 文件（缩进 2 个空格）：

name: my_app
description: My App

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/bg_login.png

我像这样加载图像：

new Positioned( 
  top: 0.0,
  width: MediaQuery.of(context).size.width,
  child: Image.asset(
    "assets/images/bg_login.png",
    fit: BoxFit.fitWidth,
  )
)

有时图像会加载，有时会失败并出现以下错误：

Launching lib\main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...
Syncing files to device Android SDK built for x86...
D/        ( 3460): HostConnection::get() New Host Connection established 0xb099df40, tid 3479
D/EGL_emulation( 3460): eglMakeCurrent: 0xa325a620: ver 2 0 (tinfo 0xb0983620)
I/flutter ( 3460): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 3460): The following assertion was thrown resolving an image codec:
I/flutter ( 3460): Unable to load asset: assets/images/bg_login.png
I/flutter ( 3460): 
I/flutter ( 3460): When the exception was thrown, this was the stack:
I/flutter ( 3460): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 3460): <asynchronous suspension>
I/flutter ( 3460): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:427:44)
I/flutter ( 3460): <asynchronous suspension>
I/flutter ( 3460): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:412:14)
I/flutter ( 3460): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:86)
I/flutter ( 3460): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
I/flutter ( 3460): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:63)
I/flutter ( 3460): (elided 8 frames from package dart:async)
I/flutter ( 3460): 
I/flutter ( 3460): Image provider: AssetImage(bundle: PlatformAssetBundle#267c3(), name: "assets/images/bg_login.png")
I/flutter ( 3460): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#267c3(), name: "assets/images/bg_login.png",
I/flutter ( 3460): scale: 1.0)
I/flutter ( 3460): ════════════════════════════════════════════════════════════════════════════════════════════════════

它确实是随机发生的，有时它会起作用，但大多数时候它会抛出该错误。我也试过ImageAsset，我得到了同样的错误。

发生了什么事？我是否遗漏了有关如何正确声明和加载图像的内容？

Answer 1

嗯，Image.asset 和 AssetImage 之间存在细微差别。

Image.Asset 是 Widget 而 AssetImage 是 ImageProvider。

AssetImage 是从资产包中获取数据（图像）的图像提供者。同时，Image.asset 是一个在屏幕上渲染的小部件，它也在后端使用 AssetImage 从资产包中加载图像。

例如：

Container 需要子小部件，因此您可以提供 Image.asset，但是您不能提供 AssetImage 子小部件。此外，对于 DecorationImage 需要 image 属性，因此您可以分配 AssetImage 而不能分配 Image.asset 小部件。

您还可以在 IDE 的智能建议中声明小部件时找到哪个 Widget 需要子小部件或 ImageProvider。

我希望这一点很清楚。

Answer 2

在你的pubspec.yaml你可以声明

flutter:
  assets:
    - assets/images

并仍然使用您的资产目录结构。

Flutter 在选择合适的分辨率时使用资产变体 图片。

因此它会假设您在 images 文件夹中的 bg_login.png 将处于正常比例，并且对于不同比例的类型，您可以具有这样的结构：

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中 M 和 N 是对应于标称的数字标识符 包含在其中的图像的分辨率，换句话说，它们 指定图像适用的设备像素比。

您仍然可以通过代码Image.asset("assets/images/bg_login.png") 拨打电话。
供参考Assets and image from Flutter.io

Answer 3

创建这样的目录结构：https://i.stack.imgur.com/KChTo.png

并添加 pubspec.yaml

 assets:
- images/testImage.png
- images/2.0x/testImage.png
- images/3.0x/testImage.png

你可以参考这个链接https://flutter.dev/docs/development/ui/assets-and-images