AssetImage is not displaying image in flutter app

Question

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: android.os.BinderProxy@3eb59326 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

Answer 1

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

Answer 2

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,
        ],
      )
    );
  }
} 

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

Make sure your image folder is in project folder.

Answer 7

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'),
 ),

Answer 8

I just replaced

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

To

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

Answer 9

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

Answer 10

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

Answer 11

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.

Answer 12

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