Flutter image not displaying: "Unable to load asset"

Issue

Instead of seeing my image in my app I'm seeing a red box with an X that says Unable to load asset: images/aboutmaggie.png.

I made a directory assets with a subdirectory images. The directory assets is at the same level as pubspec.yaml.

I put the image into the images directory. When I click on the image in Android Studio the image displays.

In pubspec.yaml I have these lines:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/

I added

class AboutRoute extends StatelessWidget {
  const AboutRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kabbalistic Numerology'),
        ),
        body: ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.all(8),
            children: <Widget>[
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text: 'About Maggie McPherson',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        )),
                  ],
                ),
                textAlign: TextAlign.center,
              ),
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text:
                            "Dr. Leslie Margaret Perrin McPherson...",
                        style: TextStyle(
                          color: Colors.black,
                        )),
                  ],
                ),
              ),
              Image.asset('images/aboutmaggie.png'), // <--this image doesn't load
            ]));
  }
}

I ran flutter pub get. I ran Tools > Flutter > Flutter Clean. I shut down and restarted Android Studio.

The error message is:

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/aboutmaggie.png

I tried putting another image into assets/images and calling that but the second image wouldn't load either.

What's wrong with this picture?

Solution

there is an error in calling the image,

change this line in your code

Image.asset('images/aboutmaggie.png')

to this line

Image.asset('assets/images/aboutmaggie.png')

I hope this helps, thankyou

Answered By - fany fernaldi