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

also take a screenshot of your pubspec.yaml file – diegoveloper Aug 27 '18 at 06:52 — diegoveloper, Aug 27 '18 at 06:52

score 22 · Accepted Answer · answered Aug 29 '18 at 14:31

22

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

answered Aug 29 '18 at 14:31

Syamlal

714
1
11
20

score 16 · Answer 2 · edited Sep 01 '19 at 13:02

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

My issue was incorrect indentation. As a newbie to Flutter I just hit backspace to remove #, which makes keyword 'assets' sent to beginning of the line. — Hareen Laks, May 23 '19 at 05:44

live-love · Answer 3 · 2021-01-10T22:43:22.293

9

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.

edited Jan 10 '21 at 22:43

answered Jan 10 '21 at 18:00

live-love

48,840
22
240
204

score 6 · Answer 4 · answered Aug 20 '21 at 01:09

6

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

answered Aug 20 '21 at 01:09

Rohit Mandiwal

10,258
5
70
83

score 3 · Answer 5 · answered Aug 27 '18 at 06:29

3

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

answered Aug 27 '18 at 06:29

diegoveloper

93,875
20
236
194

i also added pubspec.yaml – Syamlal Aug 27 '18 at 06:39
Could you put the code that you are using to display the image? and also put the pubspec.yaml in your question . – diegoveloper Aug 27 '18 at 06:40
@syamlal , where is located your file logo.png ? could you take a screenshot of your tree directory of the project? – diegoveloper Aug 27 '18 at 06:51

score 1 · Answer 6 · answered Jun 05 '19 at 22:58

1

Make sure your image folder is in project folder.

answered Jun 05 '19 at 22:58

Hasini

327
4
19

score 1 · Answer 7 · answered Oct 02 '22 at 08:16

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.

Jayakumar Thangavel · Answer 8 · 2020-04-02T17:10:48.683

0

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

edited Apr 02 '20 at 17:10

answered Mar 21 '20 at 09:12

Jayakumar Thangavel

1,884
1
22
29

I appreciate your kindness towards action on other correct answers. we have given solution to the problem after checking in our environment. Please go through the link https://api.flutter.dev/flutter/painting/AssetImage-class.html and confirm using above code, user can load an image using the above code (AssetImage) – Jayakumar Thangavel Mar 22 '20 at 19:56

score 0 · Answer 9 · edited Jun 11 '20 at 11:38

0

I just replaced

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

To

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

edited Jun 11 '20 at 11:38

Jaimil Patel

1,301
6
13

answered Jun 10 '20 at 23:59

BhavneetSingh

1

score 0 · Answer 10 · answered Sep 15 '20 at 22:06

0

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

answered Sep 15 '20 at 22:06

Shomon Robie

11
1

score 0 · Answer 11 · answered Jun 06 '21 at 09:53

0

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.

answered Jun 06 '21 at 09:53

Muhamed Riyas M

5,055
3
30
31

score 0 · Answer 12 · answered Dec 21 '21 at 01:50

0

Your pubspec.yaml is not intended properly

flutter:
  uses-material-design: true

  assets:
    - images/

Check if it's intended this way.

answered Dec 21 '21 at 01:50

codegood

29
5

score -1 · Answer 13 · answered Aug 25 '21 at 11:59

-1

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

answered Aug 25 '21 at 11:59

Muhamamd Uzair Ghaffar

19
3

There is no need for whole names directory names with a trailing slash will do it fine - assets/ – Alp Altunel Oct 24 '21 at 10:42
But if you want to add selected pictures in the assets then you have to write the name of file also. – Muhamamd Uzair Ghaffar Oct 25 '21 at 13:02

score -2 · Answer 14 · answered Nov 25 '20 at 16:52

-2

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

answered Nov 25 '20 at 16:52

SmritiS

1
1

score -3 · Answer 15 · answered Aug 09 '23 at 07:05

-3

I was facing the same issue and did everything mentioned but the problem was I was using a route that was initializing another file first instead of my asset. you can also check this if the problem persists

answered Aug 09 '23 at 07:05

Abhimanyu Singh Negi Abhi

1

AssetImage is not displaying image in flutter app

15 Answers15

Linked

Related