CODEWITHSUNDEEP
flutterflutter-web
false_azure
false_azure

Reputation: 1503

TypeErrorImpl while resolving an AssetImage in Flutter

I'm pretty new to flutter and am having trouble loading images using AssetImage. I've specified this asset path in my pubspec.yaml:

flutter:
  assets:
    - assets/images/

All images are direct childs of this directory. I'm trying to load an image using AssetImage('assets/images/my_image.jpg') but have also tried AssetImage('images/my_image.jpg') (previously working, looking back at my git history). I'm seeing the error:

======== Exception caught by image resource service ================================================
The following TypeErrorImpl was thrown while resolving an image:
Expected a value of type 'Future<Map<String, List<String>>?>', but got one of type '_Future<dynamic>'

When the exception was thrown, this was the stack: 
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49      throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 84:3        castError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 442:10  cast
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/classes.dart 635:14     as_C
packages/flutter/src/services/asset_bundle.dart 184:41                                                                         loadStructuredData
...
Image provider: ScrollAwareImageProvider<Object>()
Image configuration: ImageConfiguration(bundle: PlatformAssetBundle#17594(), devicePixelRatio: 1.0, locale: en_US, textDirection: TextDirection.ltr, platform: windows)

There's an assets/images/ directory in the root directory of my project and the image definitely exists. I've seen similar errors before when trying to load non-image assets, and only fixed this by switching machines. I've tried a flutter clean but it didn't fix the issue. I also tried adding the exact image path to the assets list in pubspec.yaml.

I'm running the app in Chrome. My flutter doctor -v output is:

[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1165], locale en-NZ)
    • Flutter version 2.2.3 at C:\tools\flutter
    • Framework revision f4abaa0735 (10 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] IntelliJ IDEA Ultimate Edition (version 2021.2)
    • IntelliJ at C:\Users\harri\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\212.5080.55
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

[√] VS Code (version 1.55.2)
    • VS Code at C:\Users\harri\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 93.0.961.38

! Doctor found issues in 2 categories.

Does anyone know what could be going on?

[edit] This seems to be a caching issue, and yet flutter clean doesn't solve it. Commenting out these lines in flutter's asset_bundle.dart solves it for me (yet obviously editing Flutter source is a bad/temporary solution, and this turns off asset caching...)

    if (_structuredDataCache.containsKey(key))
      return _structuredDataCache[key]! as Future<T>;

Upvotes: 1

Views: 748

Answers (2)

Jahn E.
Jahn E.

Reputation: 1313

The lib/ path is implied, so it should not be included in the asset path (see). However, you can´t just decide to use AssetImage('assets/images/my_image.jpg') or AssetImage('images/my_image.jpg'). Whether one or another works depends on your folder structure in your project.

For example, in your lib folder you have a folder called assets, in assets you have the folders images and fonts. Now you can drag and drop your image.jpg into the images folder.

With this set up you have to do the following:

In your pubspec.yaml:

 flutter:
  assets:
    - assets/images/

The place you are using the AssetImage: AssetImage('assets/images/my_image.jpg')

Keep in mind: It's important that you have assets here because of your assets folder. Just because the asset key (from yaml in blue color) is named assets it does not mean that it goes into your assets folder automatically, it's a pure "coincidence" that this folder is named assets and the key is named assets.

So here you need to add the full path as only the lib/ path is automatically implied, as stated above. Consequently, AssetImage('images/my_image.jpg') should only work if you have an images folder directly located in lib/ (lib/images/my_image.jpg). And you have to write the last yaml line of the example above like this: - images/.

Update for Flutter Web

Please read the following Web FAQ from the official docs. Here it states the following

"If the app has the bytes of the encoded image in memory, provided as an asset, or stored on the same server that serves the application (also known as same-origin), no extra effort is necessary. The image can be displayed using Image.memory, Image.asset, and Image.network in both HTML and CanvasKit modes."

If the first setence applies, you can use Image.asset like @Mithson suggested, else you should read into Cross-origin images.

I hope this helps, as using AssetImage on Web might lead to strange behaviour and your error.

Upvotes: 2

Mithson
Mithson

Reputation: 1782

Try to just use the "Image file name" rather than using the entire location with file name. AssetImage('yourJPG.jpg') like this and not like this AssetImage('assets/images/yourJPG.jpg') and The thing that worked for me is that by simply keeping all the images in assets/ and not in assets/images/

Image is a StatefulWidget and Image.asset is just a named constructor, you can use it directly on your widget tree.

AssetImage is an ImageProvider which is responsible for obtaining the image of the specified path. so I guess using Image.asset is better than to use AssetImage. and for more info read documentation and also check this source

Upvotes: 1

Related Questions