AssetImage is not displaying image in flutter app

Viewed 54100

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

13 Answers

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

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

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.

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

enter image description here

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

Make sure your image folder is in project folder.

I just replaced

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

To

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

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

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.

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

Your pubspec.yaml is not intended properly

flutter:
  uses-material-design: true

  assets:
    - images/

Check if it's intended this way.

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