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 43 · Accepted Answer · answered May 02 '18 at 15:08

43

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

48,344
9
130
112

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

28

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

647
6
8

Why doesn't flutter indicate that it is in fact that? – M E S A B O Dec 27 '21 at 19:24

score 14 · Answer 3 · answered Dec 16 '18 at 07:06

14

Add '/' correctly in all image paths

In Android Studio,

Tools->Flutter->Flutter Clean

answered Dec 16 '18 at 07:06

Riyas PK

3,147
1
23
29

worked for me, thanks – Karol Jun 04 '23 at 18:03

score 13 · Answer 4 · answered Jun 21 '18 at 23:14

13

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,316
4
11
24

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

score 5 · Answer 5 · edited Jan 01 '21 at 22:57

5

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

57,834
11
73
112

answered Jan 01 '21 at 22:49

Nijas Abdul Munas

67
1
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
1

Thank you!!!!! This fixed my problem, I was trying everything. Turns out I just needed to run flutter clean XD Thank you – 13garth Jul 02 '21 at 12:52

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

4

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

688
1
9
21

1

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

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

3

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,979
19
38

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

1

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

385
2
8

score 1 · Answer 9 · answered Nov 15 '21 at 22:28

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

supernessy · Answer 10 · 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...

Bhakin · Answer 11 · 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 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 0 · Answer 13 · edited Apr 22 '21 at 08:53

0

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

12,568
8
34
67

answered Apr 22 '21 at 01:50

djk

11

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

score 0 · Answer 14 · answered Feb 03 '22 at 07:20

0

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

answered Feb 03 '22 at 07:20

Nahid Khan

11
2

score 0 · Answer 15 · answered Mar 23 '22 at 15:09

0

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/

answered Mar 23 '22 at 15:09

68060

298
1
3
15

score 0 · Answer 16 · answered Jul 13 '22 at 10:03

0

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

image.png --> image.jpg

answered Jul 13 '22 at 10:03

Jeff

253
1
2
10

Techie Saaketh · Answer 17 · 2022-09-22T17:06:34.207

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

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

score 0 · Answer 18 · answered Mar 12 '23 at 15:42

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.

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

Logs

Flutter Doctor

18 Answers18

Linked