Reputation: 10960

Flutter image not displaying: "Unable to load asset"

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?

Upvotes: 3

Answers (8)

Mauve Guava

Reputation: 111

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

Upvotes: 0

Giuseppe Brandi

Reputation: 11

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.

Upvotes: 0

KimAloy

Reputation: 1

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

Upvotes: 0

Thomas David Kehoe

Reputation: 10960

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.

Upvotes: 0

Ravindra S. Patil

Reputation: 14885

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->

Upvotes: 3

fany fernaldi

Reputation: 397

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

Upvotes: 9

Mohit Singh

Reputation: 367

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

Upvotes: 0

Rohith Nambiar

Reputation: 3720

Try like this:

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

Upvotes: 2

Flutter image not displaying: &quot;Unable to load asset&quot;

Answers (8)

Related Questions

Flutter image not displaying: "Unable to load asset"