[Solved] Unable to load asset Error in Flutter

In this post, we are going to show you how to solve the "Unable to load asset" error in Flutter App. This error occurs when you have incorrectly indexed the image or image folder in pubspec.yaml file.

Error Message:

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/elephant.jpg

When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync 
(package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>

Image provider: AssetImage(bundle: null, name: "assets/images/elephant.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#6c77b(), name:
  "assets/images/elephant.jpg", scale: 1.0)
═══════════════════════════════════════════════════

On your app, you may get errors like the below:

Cause of Error:

Reason 1: This error usually happens when you have incorrectly indexed the asset folder or asset file in pubspec.yaml file. The common mistake is incorrectly adding space or tabs while indexing. For example, the valid way to index the asset folder in pubspec.yaml file is:

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/ #folder indexing, all files will get indexed
    - assets/nature/ #assets subfolder all files indexing
    - assets/nature/elephant.jpg #single file indexing
  #   - images/a_dot_ham.jpeg

Reason 2: Check the spelling of the image path on Image.asset() on Dart code, for example:

Image.asset("assets/images/elephannnt.jpg")
//incorrect path to elephant.jpg

Reason 3: The image file doesn't exist in the asset folder. 

How to Solve the Error:

To solve this error, you should check your pubspec.yaml file, eighter the asset folder is indexed like below or not:

flutter:

[2 whitespaces or 1 tab]assets:
[4 whitespaces or 2 tabs]- assets/images/  #index all files inside images folder
[4 whitespaces or 2 tabs]- assets/images/elephant.jpg #index only elephant.jpg

Or, you can see our detailed guide to add Image in Flutter: How to add an image in Flutter App

Secondly, check the spelling of the image path on Image.asset() and also check if the file exists in the respective path.

In this way, you can solve the "Unable to load asset" error in the Flutter app.