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

When I try to run images assets doesn't get properly loaded, I am getting an exception:

The following assertion was thrown resolving an image codec: Unable to load asset: /images/p8.png`

Some weeks ago it was working and now it stopped. I tried to run from different pc and mac too (with simulator) anв still no images can be loaded. Fonts instead are properly loaded.

This is how I load the images, they are rendered inside a GridView Below is the code:

return new Expanded(
      child: new GridView.count(
          crossAxisCount: 2,
          padding: const EdgeInsets.fromLTRB(16.0, 25.0, 16.0, 4.0),
          children: <Widget>[
            new MaterialButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/biliardo');
              },
              child: new Column(
                children: <Widget>[
                  new Image(
                    //parte importante, definire gli asset per trovarli più velocemnte
                    //si inseriscono nel pubspec.yaml
                    image: new AssetImage('/images/p8.png'),
                    height: 100.0,
                    width: 100.0,
                  ),
                  new Text(
                    "BILIARDO",
                    style: new TextStyle(
                      color: (darkTheme) ? Colors.blue : Colors.black,
                    ),
                  )
                ],
              ),
            ),

            .....

    );

pubsec.yaml file code:

flutter:
  uses-material-design: true
  assets:
    - images/emptyBall.png
    - images/p1.png
    - images/p2.png
    - images/p3.png
    - images/p4.png
    - images/p5.png
    - images/p6.png
    - images/p7.png
    - images/p8.png
    - images/p9.png
    - images/p10.png
    - images/p11.png
    - images/p12.png
    - images/p13.png
    - images/p14.png
    - images/p15.png
    - images/basket.png
    - images/volley.png
    - images/tennis.png
    - images/rugby.png
    - images/numbers.png
  fonts:
    - family: ShotClock
      fonts:
        - asset: utils/ShotClock.ttf

Logs

flutter analyze

Analyzing D:\Android\AndroidStudioProjects\flutter_app...
No issues found!
Ran in 5.2s

flutter -v run

https://docs.google.com/document/d/133Z7029VGJXBDCYLgCrj09F9cLbvIQQ5X8yBS4pPC7I/edit?usp=sharing

Flutter Doctor

flutter doctor -v

[√] Flutter (Channel beta, v0.3.1, on Microsoft Windows [Versione 10.0.16299.371], locale it-IT)
    • Flutter version 0.3.1 at C:\Program Files\Flutter\flutter
    • Framework revision 12bbaba9ae (12 days ago), 2018-04-19 23:36:15 -0700
    • Engine revision 09d05a3891
    • Dart version 2.0.0-dev.48.0.flutter-fe606f890b

[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at C:\Users\Zanini\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 24.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[√] Connected devices (1 available)
    • Nexus 5X • 01cde5e7db8d4c14 • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

Solution 1:^[1]

Get rid of the leading / in your path to the png. It should be images/p8.png.

Also, consider using the cleaner Image.asset constructor, for example:

new Image.asset('images/p8.png', width: 100.0, height: 100.0)

Solution 2:^[2]

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/

Solution 3:^[3]

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

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

Solution 4:^[4]

Add '/' correctly in all image paths

In Android Studio,

Tools->Flutter->Flutter Clean

Solution 5:^[5]

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

Solution 6:^[6]

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.

Solution 7:^[7]

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.

Solution 8:^[8]

Close the emulator
Type "flutter clean" in your terminal (without quotation).
Run your App again.
It'll work fine for you.

Solution 9:^[9]

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

Solution 10:^[10]

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

Solution 11:^[11]

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'

Solution 12:^[12]

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.

Solution

Solution 13:^[13]

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

Solution 14:^[14]

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/

Solution 15:^[15]

I'm a super newbie on dart and programming. So I suffered from this thing for several days. :-(

Followed Every Single Steps from various websites and answers. But could fix it.

After a while... I found out that my "analysis_options.yaml" was totally wrong.

  rules:
    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
    prefer_typing_uninitialized_variables: false
    prefer_const_constructors_in_immutables: false
    prefer_const_constructor: false
    avoid_print: false
    prefer_const_literals_to_create_immutables: false

I had an error on aligning those things. under the rules thing, I need double spaces on every prefer_... and for me, they were sticked to the left. I made them aligned with double spaces, All things cleared.

Hope someone get help by this.

Solution 16:^[16]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Richard Heap
Solution 2
Solution 3	Serge Breusov
Solution 4	Riyas PK
Solution 5
Solution 6	campovski
Solution 7	Raj Kalathiya
Solution 8	cigien
Solution 9	JustDave
Solution 10
Solution 11
Solution 12	dan1st
Solution 13	Nahid Khan
Solution 14	68060
Solution 15	Suraj Rao
Solution 16	MUHINDO

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

Logs

Flutter Doctor

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]