Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to load Asset - wrong indentation in pubspec.yaml #11199

Closed
zvandehy opened this issue Jul 13, 2017 · 53 comments
Closed

Unable to load Asset - wrong indentation in pubspec.yaml #11199

zvandehy opened this issue Jul 13, 2017 · 53 comments
Labels
a: assets Packaging, accessing, or using assets a: first hour The first hour of using Flutter c: crash Stack traces logged to the console tool Affects the "flutter" command-line tool. See also t: labels.

Comments

@zvandehy
Copy link

Steps to Reproduce

I downloaded some images to put into my app as Assets instead of Network images. I saved those images in a directory on my project called "Images". I saved those images as assets in the pubspec.yaml

assets:
  - images/default.png
  - images/cat.jpg.

I try to load the cat.jpg image with this line of code new Image(image: new AssetImage('images/cat.jpg')). But I get this error

══╡ EXCEPTION CAUGHT BY SERVICES ╞═════════════════════════════════
The following assertion was thrown resolving a single-frame image stream:
Unable to load asset: images/cat.jpg
When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1      AssetBundleImageProvider.loadAsync (package:flutter/src/services/image_provider.dart:370:44)
<asynchronous suspension>
#2      AssetBundleImageProvider.load (package:flutter/src/services/image_provider.dart:356:7)
#3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/services/image_provider.dart:253:61)
#4      ImageCache.putIfAbsent (package:flutter/src/services/image_cache.dart:82:22)
#5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/services/image_provider.dart:253:38)
(elided 8 frames from package dart:async)
Image provider: AssetImage(bundle: null, name: "images/cat.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#f1859(), name: "images/cat.jpg", scale:
1.0)
══════════════════════════════════════════════════════════════════

Network images load fine but any assets don't.

Logs

flutter run -d all

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Running 'gradle assembleDebug'...                     1.3s
Built build/app/outputs/apk/app-debug.apk (21.6MB).
Installing build/app/outputs/apk/app.apk...           1.8s
Launching lib/main.dart on iPhone 7 Plus in debug mode...
I/flutter ( 9705): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter ( 9705): The following assertion was thrown resolving a single-frame image stream:
I/flutter ( 9705): Unable to load asset: images/cat.jpg
I/flutter ( 9705): 
I/flutter ( 9705): When the exception was thrown, this was the stack:
I/flutter ( 9705): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221)
I/flutter ( 9705): <asynchronous suspension>
I/flutter ( 9705): #1      AssetBundleImageProvider.loadAsync (package:flutter/src/services/image_provider.dart:370)
I/flutter ( 9705): <asynchronous suspension>
I/flutter ( 9705): #2      AssetBundleImageProvider.load (package:flutter/src/services/image_provider.dart:356)
I/flutter ( 9705): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/services/image_provider.dart:253)
I/flutter ( 9705): #4      ImageCache.putIfAbsent (package:flutter/src/services/image_cache.dart:82)
I/flutter ( 9705): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/services/image_provider.dart:253)
I/flutter ( 9705): (elided 8 frames from package dart:async)
I/flutter ( 9705): 
I/flutter ( 9705): Image provider: AssetImage(bundle: null, name: "images/cat.jpg")
I/flutter ( 9705): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#b3e4e(), name: "images/cat.jpg", scale:
I/flutter ( 9705): 1.0)
I/flutter ( 9705): ════════════════════════════════════════════════════════════════════════════════════════════════════
Running Xcode build...                                    
Jul 13 10:07:53 Admins-MacBook-Pro com.apple.CoreSimulator.SimDevice.2A665704-95E9-4CD2-86DF-9510A136125F.launchd_sim[47623] (com.apple.videosubscriptionsd): Service only ran for 0 seconds. Pushing respawn out by 10 seconds.
CoreSimulatorBridge: Requesting installation of file:///Users/zeke/IdeaProjects/flutter_shopping/build/ios/Release-iphonesimulator/Runner.app/ with options: {
            CFBundleIdentifier = "com.yourcompany.flutterShopping";
            PackageType = Developer;
            SimulatorRootPath = "/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk";
            SimulatorUserPath = "/Users/zeke/Library/Developer/CoreSimulator/Devices/2A665704-95E9-4CD2-86DF-9510A136125F/data";
        }
Jul 13 10:08:04 Admins-MacBook-Pro com.apple.CoreSimulator.SimDevice.2A665704-95E9-4CD2-86DF-9510A136125F.launchd_sim[47623] (com.apple.videosubscriptionsd): Service only ran for 0 seconds. Pushing respawn out by 10 seconds.
CoreSimulatorBridge: Requesting launch of com.yourcompany.flutterShopping with options: {
            arguments =     (
                "--enable-dart-profiling",
                "--flx=/Users/zeke/IdeaProjects/flutter_shopping/build/app.flx",
                "--dart-main=/Users/zeke/IdeaProjects/flutter_shopping/lib/main.dart",
                "--packages=/Users/zeke/IdeaProjects/flutter_shopping/.packages",
                "--enable-checked-mode",
                "--observatory-port=8108",
                "--diagnostic-port=8109"
            );
            environment =     {
            };
        }
CoreSimulatorBridge: Beginning launch sequence for bundle 'com.yourcompany.flutterShopping'
                retryTimeout: 120.000000 (default write com.apple.CoreSimulatorBridge LaunchRetryTimeout <value>)
                bootTimeout: 300.000000 (default write com.apple.CoreSimulatorBridge BootRetryTimeout <value>)
                bootLeeway: 120.000000 (default write com.apple.CoreSimulatorBridge BootLeeway <value>)
                Note: Use 'xcrun simctl spawn booted defaults write <domain> <key> <value>' to modify defaults in the booted Simulator device.
        Simulator booted at: 2017-07-13 14:59:27 +0000
        Current time: 2017-07-13 16:08:04 +0000
        Within boot leeway: NO
CoreSimulatorBridge: Launch attempt #0 for bundle 'com.yourcompany.flutterShopping', have been trying to launch for 0 seconds. Modern launch services = YES
CoreSimulatorBridge: Got LSBundleProxy for 'com.yourcompany.flutterShopping', sequenceNumber 272, cacheGUID 8461006D-5286-45F2-849F-2F22600D1BBB
CoreSimulatorBridge: [Common] [FBSSystemService][0x5217] Sending request to open "com.yourcompany.flutterShopping"
CoreSimulatorBridge: [Common] [FBSSystemService][0x5217] Request successful: <BSProcessHandle: 0x7f80a4146df0; Runner:69456; valid: YES>
CoreSimulatorBridge: Launch successful for 'com.yourcompany.flutterShopping'
You've implemented -[<UIApplicationDelegate> application:didReceiveRemoteNotification:fetchCompletionHandler:], but you still need to add "remote-notification" to the list of your supported UIBackgroundModes in your Info.plist.
══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
The following assertion was thrown resolving a single-frame image stream:
Unable to load asset: images/cat.jpg
When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1      AssetBundleImageProvider.loadAsync (package:flutter/src/services/image_provider.dart:370:44)
<asynchronous suspension>
#2      AssetBundleImageProvider.load (package:flutter/src/services/image_provider.dart:356:7)
#3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/services/image_provider.dart:253:61)
#4      ImageCache.putIfAbsent (package:flutter/src/services/image_cache.dart:82:22)
#5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/services/image_provider.dart:253:38)
(elided 8 frames from package dart:async)
Image provider: AssetImage(bundle: null, name: "images/cat.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#f1859(), name: "images/cat.jpg", scale:
1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter Doctor

[✓] Flutter (on Mac OS X 10.12.5 16F73, locale en-US, channel alpha)
    • Flutter at /Users/zeke/flutter
    • Framework revision d36e2f6191 (3 weeks ago), 2017-06-21 15:09:10 -0700
    • Engine revision b0dee695ec
    • Tools Dart version 1.24.0-dev.6.7

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/zeke/Library/Android/sdk
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b
    • ios-deploy 1.9.1
    • CocoaPods version 1.2.1

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Gradle version 3.2
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.1.5)
    • Flutter plugin version 15.1
    • Dart plugin version 171.4694.29

[✓] Connected devices
    • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 8.0.0 (API 26) (emulator)
    • iPhone 7 Plus             • 2A665704-95E9-4CD2-86DF-9510A136125F • ios         • iOS 10.3 (simulator)
@eseidelGoogle
Copy link
Contributor

Is your "assets" key underneath a flutter: key as well?
https://flutter.io/assets-and-images/

@zvandehy
Copy link
Author

Man do I feel dumb. I just needed to tab the assets over so that they are under flutter: instead of on the same level. Thanks.

@Dano79
Copy link

Dano79 commented Apr 23, 2018

What is a flutter key ? I right clicked project file to make a directory called assets ? Is this not the correct way ?

@zoechi
Copy link
Contributor

zoechi commented Apr 23, 2018

@Dano79 flutter: in pubspec.yaml
https://flutter.io/assets-and-images/

@shashankrshukla
Copy link

shashankrshukla commented May 20, 2018

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

@ajinkya5130
Copy link

Thank you @shashankrshukla ...U saved my Day....!!!!

@karocksjoelee
Copy link

@shashankrshukla fixed my problem as well , thx

@gsunit
Copy link

gsunit commented Aug 11, 2018

I am getting the same error when I run my code initially on my device but once I hot reload/restart the app, the app works just fine. Please help me out.

@daanvandenhoek
Copy link

daanvandenhoek commented Sep 6, 2018

I am getting the same error when I run my code initially on my device but once I hot reload/restart the app, the app works just fine. Please help me out.

@gsunit

I had the same problem. I had my images inside assets/ and in the pubspec.yaml I had this.

flutter: 
 assets: 
  - assets/sz-logo.png
  - assets/comodo-1.png
  - assets/iso27001.png

All I needed to do is change it to this:

flutter:
assets:
  - assets/
  - assets/sz-logo.png
  - assets/comodo-1.png
  - assets/iso27001.png

@zoechi
Copy link
Contributor

zoechi commented Sep 6, 2018

@daanvandenhoek that shouldn't be necessary and just

flutter:
assets:
  - assets/

should have the same effect since about beta 0.6.0 (or a bit earlier - don't remember exactly when it was added).

@YRlp98
Copy link

YRlp98 commented Oct 6, 2018

@shashankrshukla Thank you so much! problem was just due to a simple "Tab". I mean it didn't work when it was like this:

assets:
    - assets/food.jpg

but then i just added a tab space before the "assets:" then it worked

  assets:
    - assets/food.jpg

@rohanmittal53
Copy link

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

I had done the same thing but still the image is not loading. Please help!

@zoechi
Copy link
Contributor

zoechi commented Dec 27, 2018

@rohanmittal53 Please consider asking support questions in one of the other channels listed at http://flutter.io/support .

@MarcioQuimbundo
Copy link

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

I had done the same thing but still the image is not loading. Please help!

try to make a full restart

@Condelab
Copy link

Condelab commented Jan 11, 2019

I am getting the same error when I run my code initially on my device but once I hot reload/restart the app, the app works just fine. Please help me out.
@gsunit

clean flutter it will solve the problem
In Android Studio,
Tools->Flutter->Flutter Clean

@mudgesteve
Copy link

How do i add an image that can be seen in a flutter app... I have read this whole article 5 times and still can not make heads or tails out of it
thanks

@HansMuller
Copy link
Contributor

@zoechi per #11199 (comment)

I just ran into this missing assets: indentation problem myself on the master tip of tree. Very confusing. Although thanks to the results of Googling "flutter unable to load asset" it's easy to find out what's wrong.

We should find a way to recognize this failure mode and provide a helpful warning.

@zoechi
Copy link
Contributor

zoechi commented Jan 27, 2019

@HansMuller I also run into this recently and I think a main problem is that using the IDE feature to comment/uncomment results in an invalid state (1 redundant space). To probably the template should be changed to remove the space after # in

  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

and all other lines that might be uncommented and then customized

@zoechi zoechi changed the title Unable to load Asset Unable to load Asset - wrong indentation in pubspec.yaml Jan 27, 2019
@zoechi zoechi reopened this Jan 27, 2019
@zoechi zoechi added c: crash Stack traces logged to the console tool Affects the "flutter" command-line tool. See also t: labels. a: assets Packaging, accessing, or using assets labels Jan 27, 2019
@zoechi zoechi added this to the Goals milestone Jan 27, 2019
@zoechi zoechi added the a: first hour The first hour of using Flutter label Jan 27, 2019
@mudgesteve
Copy link

mudgesteve commented Jan 28, 2019 via email

@erikkubica
Copy link

My issue was for those with same problem as mine

If you have sub-directories in the assets folder, then using

flutter:
  assets:
    - assets 

will not include sub-directories. Use instead:

flutter:
  assets:
    - assets/icons
    - assets/whatever
    - assets/foo
    - assets/bar

@matanshukry
Copy link
Contributor

@erikkubica comment regarding sub-directories worked for me.
Also, it seems like a flutter clean (possibly with packages get?) is needed after every change to the yaml in relation to the assets to make a change.

@jonahwilliams
Copy link
Member

Also, it seems like a flutter clean (possibly with packages get?) is needed after every change to the yaml in relation to the assets to make a change.

It shouldn't be, but this was broken for a while and only fixed in the last 2 or 3 dev releases. Can you confirm which flutter version you are on?

@matanshukry
Copy link
Contributor

Flutter 1.5.9-pre.43 • channel master • https://github.com/flutter/flutter.git Framework • revision 3cd15b52d4 (2 days ago) • 2019-04-27 04:52:18 -0400 Engine • revision 3b1bebf289 Tools • Dart 2.3.0 (build 2.3.0-dev.0.3 c46deebfb6)

Do you remember which version exactly it was fixed on?

@car7os
Copy link

car7os commented Apr 29, 2019

I did a test on another project with the same problem and it worked, I was wrong.

@lawonga
Copy link

lawonga commented May 23, 2019

Anyone getting this issue with embedded android + flutter?

@ClaudineiOlSantos
Copy link

I changed "F" to "f" and it worked for me :)

Flutter:
  assets:
    -  assets/
flutter:
  assets:
    -  assets/

@arvie86
Copy link

arvie86 commented Sep 16, 2019

same problem here

  1. I tried to change indentation in pubspec.yaml
  2. I tried to clean flutter

until now it hasn't worked

@HydroCarbon
Copy link

@arvie86 You should write like this in your pubspec.yaml:

Flutter:
  assets:
    -  assets/images/

and write like this in your ***.dart:

Image(
        image: AssetImage(
          'assets/images/******.jpg',
        ),

maybe you wrote in
images/******.jpg
I hope that can help you.Sorry about my poor English. Wish you can understand it.

@thassio-vinicius
Copy link

I am getting the same error when I run my code initially on my device but once I hot reload/restart the app, the app works just fine. Please help me out.
@gsunit

clean flutter it will solve the problem
In Android Studio,
Tools->Flutter->Flutter Clean

sir, i love you.

@arvie86
Copy link

arvie86 commented Oct 30, 2019

Thanks for the answer, but Im successfull solve this problem just add "lib" before assets. Like this :

flutter:
uses-material-design: true
assets:

  • lib/images/monkey.png
  • lib/images/cat.jpg

Image.asset('lib/assets/monkey.png')

@mazasquare
Copy link

A common mistake is when you create the assets directory in the wrong place.
Note: the assets folder should be in the same folder with the android, ios and lib folders.

@meetkyada
Copy link

flutter:

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

and

this not

flutter:

uses-material-design: true

assets:
- images/

@pranjal-joshi
Copy link

alt text
Mentioning full path including lib/assets/images/ worked for me.
Here's some code!

pubspec.yaml

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

Dart code

Image.asset("lib/images/background.jpg")

@kf6gpe
Copy link
Contributor

kf6gpe commented Dec 20, 2019

Looks like the conversation here has converged on making sure that folks use the correct indentation and syntax in their pubspec. Since this isn't a Flutter issue, I'm closing this issue.

@kf6gpe kf6gpe closed this as completed Dec 20, 2019
@matanshukry
Copy link
Contributor

@kf6gpe Just to clarify, this is not what's actually happening.

at the time I had the issue, I tried all those suggestions and none worked for me. I'm not sure if people are confusing the issue with something else and then thinking it's the solution, or perhaps people experience the problem differently, but either way none of the above was the solution.

However, flutter has been upgraded and I haven't had that issue since, so I think closing the issue until someone else will experience it (and all above suggestions won't work for him) is a good idea at the moment.

@blackperl0101
Copy link

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

I had done the same thing but still the image is not loading. Please help!

Try tab instead of space between "-" & image tag

@malkasun
Copy link

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

I had done the same thing but still the image is not loading. Please help!

Indentation error.
Check Pubspec.yaml file

`> > flutter:

uses-material-design: true
assets:
- images/xxx.png

`

@sobhan15
Copy link

When I first ran the program, I received this message :
Unable to load asset: assets/words_time/Moein - TarkamNakon.json

but after hot reload Everything worked fine.

so I noticed that the problem was with the space in the file address
after change
assets/words_time/Moein - TarkamNakon.json
to
assets/words_time/Moein-TarkamNakon.json
I no longer had a problem with the first performance

@MohamedAhmed96
Copy link

When I first ran the program, I received this message :
Unable to load asset: assets/words_time/Moein - TarkamNakon.json

but after hot reload Everything worked fine.

so I noticed that the problem was with the space in the file address
after change
assets/words_time/Moein - TarkamNakon.json
to
assets/words_time/Moein-TarkamNakon.json
I no longer had a problem with the first performance

I tried all above but that worked thank you.

@Timmmm
Copy link

Timmmm commented Jun 30, 2020

This comment thread is interesting a lesson in why YAML is shit. One of the reasons it is shit anyway! Here are some more people being screwed by YAML:

Probably too late to choose a saner format for pubspec, but it would be nice if the "Unable to load asset" error listed the assets that are present, at least in debug mode. It might help people (especially people like me who have indented things properly but still get this error :-/ ).

@JohannaShiri
Copy link

for me the problem was, that I was using dart package instead of flutter.

I was using this:
import 'dart:io';
var fullFile = new File(fullPath).readAsStringSync();

instead of:
import 'package:flutter/services.dart';
var fullFile = await rootBundle.loadString(fullPath);

after changing that, it worked for me.

@yuviingithub
Copy link

@Dano79

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

and not 

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

in pubspec....one tab makes all the difference...

You beauty,it worked like a charm

@bunnyjaykar
Copy link

I was using \ instead of / in the path so I was getting this problem
Now it has been solved

@daan-vdv
Copy link

daan-vdv commented Nov 9, 2020

If you still get an error after trying all of the above, check if there is no slash infort of the path in your dart file:
Image(image: AssetImage('/assets/image.jpg'))
this is not correct.

It shoul be:
Image(image: AssetImage('assets/image.jpg'))

@denapey
Copy link

denapey commented Jan 11, 2021

I'm sure there is nothing wrong with my code or file path, I tried all those suggestions and none worked
Then I try close the project and reopen it, Now it has been solved and images appears

(Android Studio v.3.1.4)

@siddhant-dev
Copy link

The following assertion was thrown resolving an image codec:
Unable to load asset: images/google.png

When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:227:7)

#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:667:14)

Image provider: AssetImage(bundle: null, name: "images/google.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#ca559(), name: "images/google.png", scale: 1.0)

same error and my assets is arrange

//pubsec.yaml

flutter:
uses-material-design: true
assets:
- images\google.png
- images\facebook-logo.png

@github-actions
Copy link

github-actions bot commented Aug 2, 2021

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 2, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: assets Packaging, accessing, or using assets a: first hour The first hour of using Flutter c: crash Stack traces logged to the console tool Affects the "flutter" command-line tool. See also t: labels.
Projects
None yet
Development

No branches or pull requests