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

这是我的目录结构:

- 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，我得到了同样的错误。

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

最佳答案

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

Image.Asset is a Widget while AssetImage is an ImageProvider.

AssetImage is the image provider which fetches the data(image) from the assets bundle. While, Image.asset is a widget to render on the screen which also in backend uses AssetImage to load image from asset bundle.

例如:

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

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

我希望这一点很清楚。

https://stackoverflow.com/questions/52593200/