Flutter：无法加载资产

Question

我无法将图像作为背景上传到容器，我已将图像添加到资产文件夹并将其添加到 pubspec.yaml 并向我显示错误：

I/flutter ( 6664): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 6664): The following assertion was thrown resolving an image codec:
I/flutter ( 6664): Unable to load asset: assets/images/img.png
I/flutter ( 6664): 
I/flutter ( 6664): When the exception was thrown, this was the stack:
I/flutter ( 6664): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 6664): <asynchronous suspension>
I/flutter ( 6664): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
I/flutter ( 6664): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
I/flutter ( 6664): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter ( 6664): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter ( 6664): #5      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:325:84)
I/flutter ( 6664): (elided 13 frames from package dart:async)
I/flutter ( 6664): 
I/flutter ( 6664): Image provider: AssetImage(bundle: null, name: "assets/images/img.png")
I/flutter ( 6664): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#99877(), name: "assets/images/img.png",
I/flutter ( 6664):   scale: 1.0)
I/flutter ( 6664): ════════════════════════════════════════════════════════════════════════════════════════════════════

代码：

body: Form(
          child: Column(
            children: <Widget>[
               Container(
                 decoration: BoxDecoration(
                   image: DecorationImage(
                     image: AssetImage("assets/images/img.png"),
                     fit: BoxFit.cover,
                   ),
                 ),

我已经添加了

assets:
  - assets/images/

到pubspec.yaml

图片文件夹

在

assets:
  - assets/images/img.png

I/flutter ( 6664): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 6664): The following assertion was thrown resolving an image codec:
I/flutter ( 6664): Unable to load asset: assets/images/img.png
I/flutter ( 6664): 
I/flutter ( 6664): When the exception was thrown, this was the stack:
I/flutter ( 6664): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 6664): <asynchronous suspension>
I/flutter ( 6664): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
I/flutter ( 6664): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
I/flutter ( 6664): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter ( 6664): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter ( 6664): #5      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:325:84)
I/flutter ( 6664): (elided 13 frames from package dart:async)
I/flutter ( 6664): 
I/flutter ( 6664): Image provider: AssetImage(bundle: null, name: "assets/images/img.png")
I/flutter ( 6664): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#c1182(), name: "assets/images/img.png",
I/flutter ( 6664):   scale: 1.0)
I/flutter ( 6664): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

你需要这样添加

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

Answer 2

就我而言，我需要 package 属性，因为图片在我的 library 项目中，而我运行示例项目。

包：[你的父目录或项目名称]

例如。我的项目名称是 'flutter_demo'

AssetImage('assets/images/ic_welcome.png', package: 'flutter_demo'),

pubspect.yaml

flutter:
  assets:
    - assets/images/

目录结构：

flutter_demo
  -- assets
    -- images
      -- ic_welcome.png

Answer 3

请不要使用反斜杠，如果有人试图在 windows 之外编译您的项目，它可能会失败。

此外，也无法保证未来的提交会拒绝反斜杠或将其视为转义字符序列。那么你自己的项目将无法在任何地方编译。

pubspec.yaml 查找缩进，它需要 2 个空格，并确保资产在 fluter

之后放置 2 个空格

如果要包含文件夹 assets/files/，则需要 - assets/files/，而不是 - assets/，- assets 和 -assets/files。对于您需要的图标也是如此 - assets/images/icons/

在 flutter 的 pubsec.yaml 文件中，您需要编写行 assets: ...... 从 [=34 所在的同一列位置开始=]uses-material-design: true line is starting from.

你的pubspect.yaml文件结构应该是这样的

flutter:
uses-material-design: true
  assets:
    - images/some_image.png
    - images/some_icon.png

在这一切之后点击了 flutter clean 命令

Answer 4

我遇到了这个错误，我是这样解决的：

首先确保资产文件夹位于项目的根目录下，在 lib 文件夹之外。
检查 AssetImage() 中图像路径字符串前面没有斜线。
检查 pubspec.yaml 和 AssetImage 中的文件名和路径是否正确。
始终记得保存文件并在更改后热重载。
对于 svg 文件，使用 flutter_svg package。

Flutter：无法加载资产

Flutter: Unable to load asset

assets

dart

android-studio

flutter