无法加载资产图像（Flutter）

Question

I'm repeatedly having the following exception in terminal while trying to add an asset image in the appBar of my Flutter application (running on an Android emulator):

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

Another exception was thrown: A RenderFlex overflowed by 117 pixels on the right.

This is the code of application's home:

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

The pubspec.yaml file is structured like this:

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/

(The indentation is the same used in the actual file of my project)

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

Just remove / from your path that you are assigning to Image widget like

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

Answer 3

Try this. this wilbe help

Image(image: AssetImage(""));

Answer 4

Remove the / slash in front of the assets/ path. It should read Image.asset('assets/images/small.png')

Also, double check the image name, then save the file and hot restart.

Answer 5

Make sure your image is declared in the asset section of your pubspec.yaml

every image that you want to be able to load should be declared, if one is missing flutter wont be able to load it