无法加载资产图像（Flutter）

Question

尝试在我的 Flutter 应用程序（在 Android 模拟器上运行）的 appBar 中添加资产图像时，我在终端中反复出现以下异常：

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: /assets/images/small.png

When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:237:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>

Image provider: AssetImage(bundle: null, name: "/assets/images/small.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#64048(), name:
  "/assets/images/small.png", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

抛出另一个异常：RenderFlex 在右侧溢出 117 个像素。

这是应用程序主页的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gofundleaf/screens/profile.dart';
import 'package:gofundleaf/services/auth_service.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool _loading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          padding: const EdgeInsets.only(left: 3, right: 3),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset('/assets/images/small.png'),
                  const Text('leaf')
                ],
              ),
            ],
          ),
        ),
      ),
      body: Center(
        child: _loading
            ? const CupertinoActivityIndicator()
            : ElevatedButton(
                child: const Text('Login'),
                onPressed: () async {
                  setState(() {
                    _loading = true;
                  });
                  final user = await AuthService.login();
                  if (user != null) {
                    Navigator.of(context).pushReplacement(
                      MaterialPageRoute(
                        builder: (context) => Profile(user: user),
                      ),
                    );
                  } else {
                    setState(() {
                      _loading = false;
                    });
                  }
                },
              ),
      ),
    );
  }
}

pubspec.yaml 文件的结构如下：

name: gofundleaf

description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
 cupertino_icons: ^1.0.2
  google_sign_in: ^5.2.1
  http: ^0.13.4
  url_launcher: ^6.0.17

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  uses-material-design: true

  assets:
    - assets/images/

（缩进与我项目的实际文件中使用的相同）

Answer 1

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gofundleaf/screens/profile.dart';
import 'package:gofundleaf/services/auth_service.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool _loading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          padding: const EdgeInsets.only(left: 3, right: 3),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset('assets/images/small.png'),
                  const Text('leaf')
                ],
              ),
            ],
          ),
        ),
      ),
      body: Center(
        child: _loading
            ? const CupertinoActivityIndicator()
            : ElevatedButton(
                child: const Text('Login'),
                onPressed: () async {
                  setState(() {
                    _loading = true;
                  });
                  final user = await AuthService.login();
                  if (user != null) {
                    Navigator.of(context).pushReplacement(
                      MaterialPageRoute(
                        builder: (context) => Profile(user: user),
                      ),
                    );
                  } else {
                    setState(() {
                      _loading = false;
                    });
                  }
                },
              ),
      ),
    );
  }
}

Answer 2

只需从您分配给 Image 小部件的路径中删除 /

Image.asset('assets/images/small.png'),

Answer 3

尝试这个。 这将有助于

Image(image: AssetImage(""));

Answer 4

去掉 assets/ 路径前的 / 斜线。 它应该读作Image.asset('assets/images/small.png')

另外，仔细检查图像名称，然后保存文件并热重启。

Answer 5

确保您的图像在 pubspec.yaml 的资产部分中声明

您希望能够加载的每个图像都应该声明，如果缺少一个 flutter 将无法加载它