10

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

Improve this question
1
  • also take a screenshot of your pubspec.yaml file Commented Aug 27, 2018 at 6:52

18 Answers 18

Reset to default
23

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

16

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

1 Comment

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

Improve this answer

Comments

8

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

Improve this answer

1 Comment

This worked for me! The key was making sure there was one indent on assets: and two idents on the paths that follow.
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
Improve this answer

3 Comments

i also added pubspec.yaml
Could you put the code that you are using to display the image? and also put the pubspec.yaml in your question .
@syamlal , where is located your file logo.png ? could you take a screenshot of your tree directory of the project?
2

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.

Improve this answer

Comments

1

Make sure your image folder is in project folder.

Improve this answer

Comments

1

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

Improve this answer

Comments

1

Your pubspec.yaml is not intended properly

flutter:
  uses-material-design: true

  assets:
    - images/

Check if it's intended this way.

Improve this answer

Comments

1

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.
Improve this answer

Comments

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'),
 ),
Improve this answer

1 Comment

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 api.flutter.dev/flutter/painting/AssetImage-class.html and confirm using above code, user can load an image using the above code (AssetImage)
0

I just replaced

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

To

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

Comments

0

My issue was that I was using Image.asset instead of Image.file to retrieve user uploaded images. It turns out you have to use the latter for dynamically uploaded images. https://api.flutter.dev/flutter/widgets/Image-class.html

Improve this answer

Comments

0

simple answers if you run in web then use this Image.asset('images/logo.png') and if you run in mobile Image.asset('assets/images/logo.png')

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
0

This should help - https://stackoverflow.com/a/79654862
It possible that you didn't define package parameter.

Improve this answer

Comments

-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```
Improve this answer

2 Comments

There is no need for whole names directory names with a trailing slash will do it fine - assets/
But if you want to add selected pictures in the assets then you have to write the name of file also.
-2
  1. Flutter doesn't support jpg files.
  2. Try the complete path of the file with '/'(forward slash).
Improve this answer

Comments

-2

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.