AssetImage is not displaying image in flutter app

image not displaying in flutter app. But I got some errors in debug console.

I/FlutterActivityDelegate(22603): onResume setting current activity to this
I/FlutterActivityDelegate(22603): onResume setting current activity to this
I/Timeline(22603): Timeline: Activity_idle id: [email protected] time:39937973
I/flutter (22603): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter (22603): The following assertion was thrown resolving an image codec:
I/flutter (22603): Unable to load asset: assets/images/logo.png
I/flutter (22603): When the exception was thrown, this was the stack:
I/flutter (22603): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter (22603): <asynchronous suspension>
I/flutter (22603): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:383:44)
I/flutter (22603): <asynchronous suspension>
I/flutter (22603): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:368:14)
I/flutter (22603): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:86)
I/flutter (22603): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:82:22)
I/flutter (22603): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:63)
I/flutter (22603): (elided 8 frames from package dart:async)
I/flutter (22603): Image provider: AssetImage(bundle: null, name: "assets/images/logo.png")
I/flutter (22603): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#19ce7(), name: "assets/images/logo.png",
I/flutter (22603): scale: 1.0)
I/flutter (22603): ════════════════════════════════════════════════════════════════════════════════════════════════════
D/ViewRootImpl(22603): ViewPostImeInputStage ACTION_DOWN
D/ViewRootImpl(22603): ViewPostImeInputStage ACTION_DOWN

My Pubspec.yaml file

assets: - assets/images/logo.png

login.dart code

new Image.asset("assets/images/logo.png", width: 60.0, height: 24.0, fit: BoxFit.cover)

directory structure

pubspec.yaml file

Solution 1: diegoveloper

I assume you copied your files inside assets/images/ folder right? Also you need to reference your images into the pubspec.yaml file.

  flutter:

  ...

    assets:
      - assets/images/logo.png

Solution 2: Syamlal

i mentioned images files in wrong way. i put space between '-' and image name instead of tab.

assets:

- assets/images/logo.png

Don't put spaces between the character instead of tab in pubspec.yaml file

Solution 3: vicky keshri

There may be two issues:

1.) Either you pubspec.yaml file is not having proper indention. Attaching snippet for reference.

flutter:  
  uses-material-design: true   
  assets:   
    - assets/

- assets/ will consider all the images in the directory.

2.) If you are using .jpg image then please change it to .jpeg wherever you are calling it.

Attaching the snippet for you reference

class _UserLoginState extends State<UserLogin> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Image(image: AssetImage("assets/christmas.jpeg"),
          fit: BoxFit.cover,
        ],
      )
    );
  }
} 

Solution 4: Hasini

Make sure your image folder is in project folder.

Solution 5: Avid Programmer

Refer https://api.flutter.dev/flutter/painting/AssetImage-class.html

Add assets images in pubspec.yaml file and in the asset mention the path from images and it works fine.

 new AssetImage("images/logo.png")

For example

CircleAvatar(
  radius: 80,
  backgroundImage: AssetImage('images/logo.png'),
 ),

Solution 6: BhavneetSingh

I just replaced

Image.asset("assets\images\_Lightweight.jpeg"),

To

Image.asset("assets/images/_Lightweight.jpeg"),

Solution 7: Shomon Robie

my problem was indentation of assets section. I wrote it at the beginning of the line, whereas it should be indented with a Tab after flutter: section.

Robie

Solution 8: SmritiS

1. Flutter doesn't support jpg files.
2. Try the complete path of the file with '/'(forward slash).

Solution 9: live-love

Make sure the folder you are referring in Image.asset contains the file.

For example:

Image.asset(
"./assets/images/loading.gif",
height: 125.0,
width: 125.0,
)

The folder should be:

C:\your_app_folder\assets\images

pubspec.yaml:

  assets:
    - assets/
    - assets/images/

Run flutter clean to clean the intermediate files and refresh.

Solution 10: Muhamed Riyas M

I faced the same issue after adding a new image to the asset folder. I was doing "Hot Reload", I destroyed the app from the background, re-run the app and the problem got resolved.

Solution 11: Rohit Mandiwal

Hot Reload was the issue in my case. I simply restarted the Android studio and re-run the app, it all worked!.

Solution 12: Muhamamd Uzair Ghaffar

These changings will definately work.

AssetImage('mypicture.jpg')

Above is my code, I have not used "assets" folder name with my image file name and it works perfect.

and these are my assets in 'pubspec.yaml' file.

assets:
    - assets/cat.png
    - assets/mypicture.jpg```

Solution 13: codegood

Your pubspec.yaml is not intended properly

flutter:
  uses-material-design: true

  assets:
    - images/

Check if it's intended this way.

Solution 14: Justine Laserna

There are several opportunities to make the mistake, higher chance that it's in the pubspec.yaml declaration.

• Most of the time it's better to specify the directory of your assets. This way you'll edit pubspec.yaml less frequently.
• The asset directory/item is not declared properly (e.g. wrong indent)
• If your IDE is Android Studio and you edited the pubspec, hitting the Run button won't cut it. Execute flutter run in the Terminal to run the app.
• If you can't type in the Terminal, flutter may already be running. Press ctrl + c to terminate the process then run. No need to restart your IDE.