CODEWITHSUNDEEP
imagedartfluttercodec
Andrea Zanini
Andrea Zanini

Reputation: 680

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!

Upvotes: 57

Views: 135869

Answers (18)

K D
K D

Reputation: 215

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.

Upvotes: 0

Techie Saaketh
Techie Saaketh

Reputation: 23

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

Upvotes: 0

Jeff
Jeff

Reputation: 475

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

image.png --> image.jpg

Upvotes: 0

68060
68060

Reputation: 427

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/

Upvotes: 0

Nahid Khan
Nahid Khan

Reputation: 11

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

Upvotes: 0

JustDave
JustDave

Reputation: 546

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

Upvotes: 2

djk
djk

Reputation: 11

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

Upvotes: 0

MUHINDO
MUHINDO

Reputation: 1241

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

Upvotes: 0

Bhakin
Bhakin

Reputation: 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'

Upvotes: 0

Nijas Abdul Munas
Nijas Abdul Munas

Reputation: 77

  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.

Upvotes: 6

Raj Kalathiya
Raj Kalathiya

Reputation: 445

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.

Upvotes: 1

campovski
campovski

Reputation: 3163

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.

Upvotes: 3

Jerin
Jerin

Reputation: 801

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

Upvotes: 4

supernessy
supernessy

Reputation: 116

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

Upvotes: 0

JMax
JMax

Reputation: 797

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/

Upvotes: 30

Riyas PK
Riyas PK

Reputation: 3217

Add '/' correctly in all image paths

In Android Studio,

Tools->Flutter->Flutter Clean

Upvotes: 14

Serge Breusov
Serge Breusov

Reputation: 1396

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

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

Upvotes: 15

Richard Heap
Richard Heap

Reputation: 51770

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)

Upvotes: 47

Related Questions