Home > Software engineering >  Flutter image not displaying: "Unable to load asset"
Flutter image not displaying: "Unable to load asset"

Time:01-20

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.

enter image description here

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?

CodePudding user response:

Try like this:

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

CodePudding user response:

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

CodePudding user response:

Try below code hope its helpful to you.

Refer documation enter image description here

CodePudding user response:

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

  •  Tags:  
  • Related