Flutter images not loaded (EXCEPTION: resolving an image codec)

One thing to note is the 'assets:' tag must be correctly indented with the 'flutter:' tag, but it only throws an error occasionally when loading an asset. So this won't work:

flutter: 
assets:
    - images/

But this will:

flutter: 
  assets:
    - images/

with new flutter version you also could put folders in pubspec.yaml, not only files

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

Add '/' correctly in all image paths

In Android Studio,

Tools->Flutter->Flutter Clean

1. Close the emulator

2. Type "flutter clean" in your terminal (without quotation).

3. Run your App again.

4. It'll work fine for you.

Besides the directory path make sure your image is valid, I have a png file which was not supported that was causing this error.. just make sure by opening the image in any image viewer to confirm the file is supported...

Beside the problems other stated, when adding new image assets, a cold reload is necessary to display new assets. If that does not help, flutter clean should solve the problems.

Wow, came here looking for just what's expected as it isn't a codec issue and got a hodge-podge of answers. What I've found from the documentation. For further explanation this directory should be in the project root Not under src or lib.

In pubspec.yaml

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

To include all assets under a directory, specify the directory name with the / character at the end:

flutter:
  assets:
    - directory/
    - directory/subdirectory/

Let's say I did the following; where the images dir has multiple.

flutter:
  assets:
    - assets/images/

With my project structure simplified as

projectName
  ...
  lib
  pubspec.yaml
  assets
    images
      file1.png
      etc...
  ...

Then in a widget just do (Hint* the full path is required...) I thought if assets already had the path the PATH was in context of the app. This was my mistake. Then do a flutter clean and run it should work fine.

  @override
  Widget build(BuildContext context) {
    return Image(image: AssetImage('assets/images/file1.png')),
  }

Go to Tools -> Flutter -> Flutter Clean Then Rerun the project (Not hot reload)

By this 2 steps I am able to solve same issue. If pupspec.yaml file is Indented as Rules.

i am developping on Windows 10 and not MAC OS X nor Linux i had the same problem...in fact the solution for me was just to change the unix like path separator : '/' by the one for windows environnement : '\' in the dart/flutter file

So in the pubspec.yaml images/mypicture.jpg And in the dart file : When instanciating your object with :

child new Images.asset('images\\mypicture.jpg')

The double anti slash : \\ is too escape the \ character....

Hope it will help many Windows plateform based developers with flutter

This make it work on the Android emulator, but on the Physical Mobile i suppose you will need before packaging to change in the other way using slash instead / try both...

Not so sure but can fix the problem:

• It often causes the CODEC problem if one widget uses the root directory whereas an another widget uses the sub-directory.

• avoid using sub-directory (such as "- images/") in the pubspec.yaml file, for example avoid using:

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

INSTEADE USE:

flutter:

  uses-material-design: true

  assets:

    - 'FILENAME WITH ITS EXTENSION'  

Please make sure that you include that asset in pubspec.yaml file like this

     # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/icon-48.png
    - assets/images/icon-480.png
    - assets/images/icon-400.png
    - assets/images/qr.png
    - assets/images/bulb.png
    - assets/images/google_logo.png

The same thing happened to me, I spent almost two hours seeing the error and the answer was so simple.

In the assets directory, I forgot to put the forward slash (/) because I didn't want to load the image.

I was also facing this problem. I just hot restarted my app instead of hot reload and it worked!!!

Wasted 3 hours on this. In the end I realised I had to move the "assets" stuff down to the very bottom of the yaml file and paste it under the last flutter: use 2 spaces before assets: and 4 before - assets/

If none of the above solutions work, change image format to JPG. e.g.

image.png --> image.jpg

The main reason why we get this error even after doing everything correctly is changes like addition/removal of dependencies and assets requires complete restart. Hot reload isn't just sufficient for that. So when you restart all these assets and dependencies will then my tagged along with respective procedures.

Checklist of things to resolve this error

1. Check whether pubspec.yaml is valid. (One can validate it through this link)
2. Check for typos
3. Restart your application instead of hotreload

If using classes to declare dependencies like this

class Assets {
  static const String image1 = 'assets/images/image1.jpg';
  static const String image2 = 'assets/images/image2.jpg';
}

Solution - is to create a new class & add the below lines to the new class.

class NewAssets {
  static const String image1 = 'assets/images/image1.jpg';
  static const String image2 = 'assets/images/image2.jpg';
}

Reason - is that the old class containing the lines is or may be corrupted.

Even if you name the class the same as before it will still work - as the underlaying unique ID associated for that class (internal binary) is now changed to new unique ID.