Flutter image not displaying: "Unable to load asset"

Question

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?

Answer 1

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

Answer 2

Try below code hope its helpful to you.

Refer documation here for Adding assets and images

Refer Image Class here

Your folder structure

project directory
   - assets
       - images
          - your_image.png

Your pubspec.yaml file

flutter:
  assets:
    - assets/images/

Your Widget:

   Image.asset(
        'assets/images/ln.png',//just change your image to my image
        height: 150,
        //width: 100,
      ),

Note - If you adding correct code and details then your problem not resolved then stop(exit) the project/app and relaunch again

Result Screen->

Answer 3

Try like this:

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

Answer 4

You need to provide complete path of the image. Replace Image.asset('images/aboutmaggie.png') with Image.asset('assets/images/aboutmaggie.png').

Answer 5

It was cacheing issue. Last night I tried

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

but that didn't work. This morning I started up Android Studio and it asked,

pubspec.yaml has changed. Do you want to run flutter pub get?

Well, that's odd. I'd just started Android Studio. I hadn't changed anything. I changed the path back to 'assets/images/aboutmaggie.png', ran flutter pub get, did a hot restart and the image appeared.

Then I opened pubspec.yaml and changed it to

  assets:
    - assets/bowlingballs/

I ran flutter clean, flutter pub get, did another hot restart, and the image continued to appear.

I changed the path back to 'images/aboutmaggie.png', ran flutter pub get, did a hot restart and the image was gone.

My conclusion is that if you change this path

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

then run flutter pub get and a hot restart then the change will appear. But if you make changes to pubspec.yaml you won't see changes until some cache is cleared. The problem I had last night was that when I set up pubspec.yaml I had an extra space before assets. That version of pubspec.yaml got cached and subsequent versions of pubspec.yaml were ignored. flutter clean clears the Build cache but pubspec.yaml apparently isn't in the Build cache. pubspec.yaml must be cached somewhere else.

Answer 6

In your terminal, run flutter clean to clear up the cache, then run flutter pub get for flutter to fetch your assets folder afresh

This is what worked for me

Answer 7

I got this same error, tried everything for 2 days and nothing worked.

What worked was:

• manually delete the build folder from your directory

After that run on your terminal

flutter clean

flutter run (this will build the build folder again)

(run flutter build if the flutter run command doesn't work)

This may solve your issue.

Answer 8

The indentation of assets: in pubspec.yaml is very important . Ensure that assets: is properly indented