无法加载资源图像（Flutter）

Question

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

══╡ 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)
════════════════════════════════════════════════════════════════════════════════════════════════════

又出现了一个异常：在右侧溢出117像素的情况下，RenderFlex 溢出了。

这是应用首页的代码：

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/

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

- Vito Martiradonna

Answer 1

只需从您分配给Image小部件的路径中删除 / 即可，例如：

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

- Diwyansh

---

哇，这对我有用...现在错误不再显示了... - Marzuk Rahman Adi

Answer 2

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;
                    });
                  }
                },
              ),
      ),
    );
  }
}

- Yunus Kocatas

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 3

删除 assets/ 路径前面的 / 斜杠。 应该写成 Image.asset('assets/images/small.png')

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

- Sharon Atim

Answer 4

请确保您的图像在pubspec.yaml的asset部分中声明

每个您想要加载的图像都应该被声明， 如果有一个缺失，Flutter将无法加载它

- ezzou