Flutter: Unable to load asset

Question

I cant Upload image as a background to a container, i have added the image in assets folder and added it to pubspec.yaml and showing me that error :

I/flutter ( 6664): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 6664): The following assertion was thrown resolving an image codec:
I/flutter ( 6664): Unable to load asset: assets/images/img.png
I/flutter ( 6664): 
I/flutter ( 6664): When the exception was thrown, this was the stack:
I/flutter ( 6664): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 6664): <asynchronous suspension>
I/flutter ( 6664): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
I/flutter ( 6664): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
I/flutter ( 6664): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter ( 6664): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter ( 6664): #5      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:325:84)
I/flutter ( 6664): (elided 13 frames from package dart:async)
I/flutter ( 6664): 
I/flutter ( 6664): Image provider: AssetImage(bundle: null, name: "assets/images/img.png")
I/flutter ( 6664): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#99877(), name: "assets/images/img.png",
I/flutter ( 6664):   scale: 1.0)
I/flutter ( 6664): ════════════════════════════════════════════════════════════════════════════════════════════════════

code :

body: Form(
          child: Column(
            children: <Widget>[
               Container(
                 decoration: BoxDecoration(
                   image: DecorationImage(
                     image: AssetImage("assets/images/img.png"),
                     fit: BoxFit.cover,
                   ),
                 ),

I have added

assets:
  - assets/images/

to pubspec.yaml

the image folder

and at

assets:
  - assets/images/img.png

---

I/flutter ( 6664): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 6664): The following assertion was thrown resolving an image codec:
I/flutter ( 6664): Unable to load asset: assets/images/img.png
I/flutter ( 6664): 
I/flutter ( 6664): When the exception was thrown, this was the stack:
I/flutter ( 6664): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 6664): <asynchronous suspension>
I/flutter ( 6664): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
I/flutter ( 6664): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
I/flutter ( 6664): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
I/flutter ( 6664): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter ( 6664): #5      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:325:84)
I/flutter ( 6664): (elided 13 frames from package dart:async)
I/flutter ( 6664): 
I/flutter ( 6664): Image provider: AssetImage(bundle: null, name: "assets/images/img.png")
I/flutter ( 6664): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#c1182(), name: "assets/images/img.png",
I/flutter ( 6664):   scale: 1.0)
I/flutter ( 6664): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

you need add like that

flutter:
  assets:
    - assets/images/img.png

Answer 2

In my case, I needed package property as the image was in my library project and I was running the example project.

package: [your parent directory or project name]

eg. My project name is 'flutter_demo'

AssetImage('assets/images/ic_welcome.png', package: 'flutter_demo'),

pubspect.yaml

flutter:
  assets:
    - assets/images/

Directory structure:

flutter_demo
  -- assets
    -- images
      -- ic_welcome.png

Answer 3

Please don't use backslashes, if someone tries to compile your project outside windows it's probably going to fail.

Also there's nothing assuring that a future commit will reject backslashes or treat them as escape character sequence. Then your own project won't compile anywhere.

pubspec.yaml looks for the indentation and it takes 2 spaces and make sure assets are placed 2 spaces after fluter

if you want the folder assets/files/ to be included you need - assets/files/, not - assets/ neither - assets neither -assets/files. Same for icons you'd need - assets/images/icons/

In the pubsec.yaml file in flutter you need to write the line assets: ...... starting from the same column position where the uses-material-design: true line is starting from.

your pubspect.yaml file structure should be like this

flutter:
uses-material-design: true
  assets:
    - images/some_image.png
    - images/some_icon.png

After all this hit a flutter clean command

Answer 4

I encountered this error and here's how I solved it:

• First make sure the assets folder is located at the root of your project, outside the lib folder.
• Check there's no slash in front of the image path string inside AssetImage().
• Check the file name and path is correct in both the pubspec.yaml and AssetImage.
• Always remember to save the file and hot reload after making changes.
• For svg files, use the flutter_svg package.