Flutter image not displaying: "Unable to load asset" - flutter

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 like this:
Image.asset('assets/images/aboutmaggie.png'),

Answer 3

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