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

Question

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!

The question where the `images` directory is, is still not answered. — Günter Zöchbauer, May 02 '18 at 10:52
they are inside images folder in project root, sorry for the late reply — Andrea Zanini, May 03 '18 at 09:54
Did you use a leading `/` as pointed out in the answer below in the code that loads the image? — Günter Zöchbauer, May 03 '18 at 09:56

score 32 · Accepted Answer · answered May 02 '18 at 15:08

32

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)

answered May 02 '18 at 15:08

Richard Heap

32,330
5
88
85

JMax · Answer 2 · 2019-03-01T09:51:00.450

15

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/

edited Mar 01 '19 at 09:51

answered Feb 28 '19 at 17:56

JMax

421
4
6

score 10 · Answer 3 · answered Jun 21 '18 at 23:14

10

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

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

answered Jun 21 '18 at 23:14

Serge Breusov

1,096
7
23

Not able to do this, even after an upgrade. What version was this introduced? – Fifer Sheep Jul 13 '18 at 21:03

score 10 · Answer 4 · answered Dec 16 '18 at 07:06

10

Add '/' correctly in all image paths

In Android Studio,

Tools->Flutter->Flutter Clean

answered Dec 16 '18 at 07:06

Riyas PK

2,467
1
19
26

Jerin · Answer 5 · 2020-08-04T07:42:01.487

3

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

edited Aug 04 '20 at 07:42

answered May 29 '20 at 13:21

Jerin

408
4
12

could you suggest an "image viewer" to use? – tomcounsell Aug 03 '20 at 05:16
I used Windows image viewer itself – Jerin Aug 03 '20 at 08:05
2

I had a normal .png file that opens fine as an image file, but Flutter throws this (EXCEPTION: resolving an image codec). I exported it to .jpg then Flutter displayed it. I wonder what codecs Flutter supports and how to provide support of all standard codecs that fall under .png filetype – tomcounsell Aug 04 '20 at 05:58
Stranger thing to me is that sometimes my png is loaded, but others is not. It tends to throw this exception particularly in the beginning of the app run – Tiago Santos Sep 01 '20 at 11:30

supernessy · Answer 6 · 2020-06-14T15:05:34.670

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

score 0 · Answer 7 · answered Oct 26 '20 at 21:54

0

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.

answered Oct 26 '20 at 21:54

campovski

2,332
10
33

score 0 · Answer 8 · answered Dec 25 '20 at 15:00

0

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.

answered Dec 25 '20 at 15:00

Raj Kalathiya

141
1
6

Bhakin · Answer 9 · 2021-01-28T09:06:36.790

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'

score 0 · Answer 10 · edited Apr 21 '21 at 10:37

0

To add assets to your application, add an assets section, like this:

  assets:
    - assets/test.jpeg

you should only use folder name as assets because its default by Flutter ImageProvider class and then type flutter clean on terminal and restart the app

edited Apr 21 '21 at 10:37

Dude

533
2
8
13

answered Apr 20 '21 at 17:17

SARAVANA_BCA_C U18CA0133

1

score -1 · Answer 11 · edited Jan 01 '21 at 22:57

-1

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

edited Jan 01 '21 at 22:57

cigien

50,328
7
37
78

answered Jan 01 '21 at 22:49

Nijas Abdul Munas

7
1

This is what most of the other answers already stated. Duplicate answers should not be posted and will be deleted. [From Review](https://stackoverflow.com/review/low-quality-posts/27980732). – Wai Ha Lee Jan 02 '21 at 00:06

score -1 · Answer 12 · answered Mar 12 '21 at 08:43

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

score -1 · Answer 13 · edited Apr 22 '21 at 08:53

-1

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

edited Apr 22 '21 at 08:53

dan1st

6,537
6
18
44

answered Apr 22 '21 at 01:50

djk

1

2

It's better to share code snippets using ```code blocks``` instead of images. With code blocks, the snippets can be easily read and shared. It'll also helpful if you can explain how or why your answer solves the issue. Here are other tips on how to write a good answer https://stackoverflow.com/help/how-to-answer – Omatt Apr 22 '21 at 02:56

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

Logs

Flutter Doctor

13 Answers13

Linked