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 image/assets #17870

Closed
abdul5371 opened this issue May 24, 2018 · 48 comments
Closed

unable to load image/assets #17870

abdul5371 opened this issue May 24, 2018 · 48 comments

Comments

@abdul5371
Copy link

abdul5371 commented May 24, 2018

Launching lib\main.dart on Custom in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...
I/FlutterActivityDelegate( 1811): onResume setting current activity to this
I/Choreographer( 1811): Skipped 189 frames!  The application may be doing too much work on its main thread.
D/        ( 1811): HostConnection::get() New Host Connection established 0xed208640, tid 1831
I/flutter ( 1811): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter ( 1811): The following assertion was thrown resolving an image codec:
I/flutter ( 1811): Unable to load asset: image/chubby.jpg
I/flutter ( 1811): 
I/flutter ( 1811): When the exception was thrown, this was the stack:
I/flutter ( 1811): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 1811): <asynchronous suspension>
I/flutter ( 1811): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:383:44)
I/flutter ( 1811): <asynchronous suspension>
I/flutter ( 1811): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:368:14)
I/flutter ( 1811): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:86)
I/flutter ( 1811): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:82:22)
I/flutter ( 1811): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:63)
I/flutter ( 1811): (elided 8 frames from package dart:async)
I/flutter ( 1811): 
I/flutter ( 1811): Image provider: AssetImage(bundle: null, name: "image/chubby.jpg")
I/flutter ( 1811): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#9a4b0(), name: "image/chubby.jpg", scale:
I/flutter ( 1811): 1.0)
I/flutter ( 1811): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/Choreographer( 1811): Skipped 45 frames!  The application may be doing too much work on its main thread.
Syncing files to device Custom...
@zoechi
Copy link
Contributor

zoechi commented May 24, 2018

Please add pubspec.yaml and the output of flutter doctor

@abdul5371
Copy link
Author

abdul5371 commented May 30, 2018

-----pubspec.yaml------

name: flutterfirst
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

.
  cupertino_icons: ^0.1.2
  

dev_dependencies:
  flutter_test:
    sdk: flutter



assets:
  - image/chuuby.jpeg

@abdul5371
Copy link
Author

abdul5371 commented May 30, 2018

-----flutter doctor-----

C:\flutter_windows_v0.4.4-beta\flutter\bin\flutter.bat --no-color doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.4.4, on Microsoft Windows [Version 10.0.16299.431], locale en-IN)
[√] Android toolchain - develop for Android devices (Android SDK 28.0.0-rc2)
[√] Android Studio (version 3.1)
[√] Connected devices (1 available)

• No issues found!
Process finished with exit code 0

@stevenbrix
Copy link

what was the fix? i'm having the same issue with the flutter sample app

@zoechi
Copy link
Contributor

zoechi commented Aug 22, 2018

Probably just ensuring that the asset path in pubspec.yaml is correct.

@stevenbrix
Copy link

stevenbrix commented Aug 22, 2018

Looks like it was some issue with the image provided and loading it on the emulator. I tried a different, smaller image and it worked fine.

** I take that back, it's now loading fine. Maybe a whitespace issue in pubspec.yaml?

@stevenbrix
Copy link

honestly have no clue, it's working fine now and I didn't do anything other than add a second image to pubspec.yaml file. ¯_(ツ)_/¯

@zoechi
Copy link
Contributor

zoechi commented Aug 22, 2018

flutter clean is currently a good idea if something behaves weirdly (should be improved)

@MarcusFB
Copy link

MarcusFB commented Oct 27, 2018

Incorrect espace ------------

assets:                         
  - image/chuuby.jpeg  

Correct is ------------------

assets:
- image/chuuby.jpeg

@sirdody
Copy link

sirdody commented Oct 30, 2018

I have the same issue. I've just run "$ flutter clean", then everything is OK.

@zoechi
Copy link
Contributor

zoechi commented Oct 30, 2018

@mrlinhhandsomevn are you on latest Flutter version?
dev channel might be worth a try. flutter clean is now required much less.

@MikeMcflako
Copy link

i have this issue, i have my path in pubspec.yaml
and i am calling Image.asset('image.png')
and flutter is still saying unable to load asset: image.png

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

@zoechi
Copy link
Contributor

zoechi commented Nov 1, 2018

@MikeMcflako I'd suggest to ask on StackOverflow with more details.

@Achileas
Copy link

Achileas commented Nov 7, 2018

If any of you using Windows \ rather than /, worked for me!!!

@zoechi
Copy link
Contributor

zoechi commented Nov 7, 2018

@Achileas I think that is worth a new issue. It shouldn't be necessary to use \.
A Flutter project should work the same on Windows, Linux, Mac without changes.

@Achileas
Copy link

Achileas commented Nov 9, 2018 via email

@mudgesteve
Copy link

I wish i could make heads or tails out of this subject.. should not be this hard to add image assets.. Can anyone make this clear?? the docs do not give me a clue and here i get more confuised as there are three or four examples that should work

@zoechi
Copy link
Contributor

zoechi commented Jan 20, 2019

@mudgesteve check your yaml with http://www.yamllint.com/

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

@mudgesteve
Copy link

mudgesteve commented Jan 20, 2019 via email

@zoechi
Copy link
Contributor

zoechi commented Jan 20, 2019

@mudgesteve no worries. I just try to point people where they might have better chance of getting solutions. We don't have the bandwidth for individual support here.

@mudgesteve
Copy link

mudgesteve commented Jan 20, 2019 via email

@larryq
Copy link

larryq commented May 16, 2019

Just to add to the list, running flutter clean worked for me as well. This was the relevant section of my pubspec.yaml file (for some reason the spacing is messed up below, but there's an indentation on the second and third lines, trust me:)

assets:
- assets/tcw18.png
- assets/CW_small.jpg

I couldn't call AssetImage('assets/CW_small.jpg') without getting the same error as the OP, but now after flutter clean it works great. Didn't do or change anything else.

@Neutrino-1
Copy link

The other reason may be because of the path mentioned in the code

try changing the path from

AssetImage("/image/img.jpeg")
to
AssetImage("./image/img.jpeg")

I know both are similar but this worked for me!

@ducquoc
Copy link

ducquoc commented Jun 27, 2019

I will be straight: there is typo in original author post

  Unable to load asset: image/`chubby.jpg`

Double "b" bb vs double "u" uu in pubspec:

assets:
  - image/`chuuby.jpeg`

After correct those typos (maybe using copy & paste) again you can run flutter clean .
Usually using the folder as "assets" list item is better , can avoid typo issue (usually from copy/paste or native keyboard hook)

@petunsecngmail
Copy link

@baramawy
Copy link

Incorrect espace ------------

assets:                         
  - image/chuuby.jpeg  

Correct is ------------------

assets:
- image/chuuby.jpeg

oh man it fucking worked thank u <3

@AadeshGujjar
Copy link

AadeshGujjar commented Nov 2, 2019

I encountered the same error, The fix that I found was that 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.
Screenshot (37)

Hope this Helps. :)

@astanwar99
Copy link

I am having the same issue. I have tried flutter clean and checked the indentation multiple times. But I am still getting the error. I have tried both types of indentation

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

This is the code where I am accessing the image

body: Center(
          child: Image(image: AssetImage('images/diamond.png')),
        ),

Error (Just in case):

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

Output of flutter doctor

D:\PROGRAMMING\AppDevelopment\FlutterApps\i_am_rich>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.535], locale en-IN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code, 64-bit edition (version 1.39.2)
    X Flutter extension not installed; install from
    https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[√] Connected device (1 available)

! Doctor found issues in 2 categories.

My directory structure:
Img1

@blunderous
Copy link

blunderous commented Jan 3, 2020

@astanwar99 according to the documentation , you should not use the second type of documentation you mentioned on your comment. As in the documentation:

flutter:
  assets:
    - assets

After writing the last paragraph, I noticed you are using hot reload. I had that same problem and sometimes the only option is to use hot restart or even rebuild the app again.

The identations are important, just like in Python, as it guides itself with them. Try using other ways to display an Image, as there is a couple of classes with similar functionalities. It came to me as a surprise when it happened, but after running flutter clean it went away. Would suggest creating a folder named assets and then inside that folder create whatever you wish. I can't be completely sure about this, but in some threads on other websites, people mention that a folder with that name is treated differently by Flutter.

@ToxaDev
Copy link

ToxaDev commented Jan 16, 2020

It worked for me:

  1. Set only full path to asset in pubspec.yaml
    e.g.
assets:
    - assets/files/asset.txt
    - assets/images/icons/myicon.png

Whole folder not worked for me - assets/

  1. Add ./ to the beginning of your asset path when you loading it
    e.g. rootBundle.loadString('./assets/path/to your/asset.txt

  2. flutter clean

@astanwar99
Copy link

The issue is resolved now. I am not sure how but I didn't change anything. What I did was:
I used flutter clean and restarted Android Studio multiple times.
And just to be clear, I am using this kind of indentation:

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

As of now its showing no error but earlier it showed error 4-5 times before running successfully. I may be wrong but maybe it was happening because of some memory latency as my Android Studio is in SSD and the project is in HDD.

Thanks for all the help.

@goodlifechris
Copy link

As a new guy but kinda old in Android. Whenever you add an asset on fly don't forget packages get. Since its configured from the yaml. Had same issue still learning flutter.

@fmatosqg
Copy link
Contributor

@ToxaDev
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/

At least that's how it worked back when folder support was originally added.

There's a reliable way to know what files are added according to what you write on pubspec: find . -name AssetManifest.json. You may find multiple files and I'm not sure what each one means, but it's safe to assume that if at least one of them mentions the file you want, then your pubspec.yaml is doing what you intend it to.

It doesn't hurt to do flutter clean or cold restart if the manifest is right and you're still having problems.

Source: I added that code and updated docs back then, though haven't checked for changes in over almost 2 years.

@VikasID
Copy link

VikasID commented Apr 13, 2020

yaml file looks for the indentation and it takes 2 spaces
make sure assets are placed 2 spaces after fluter
flutter:
uses-material-design :true
assests:
-images/

@leandrogabeh
Copy link

observe o tamanho da imagem, se for muito grande, o androis Studio nao consegue exibir. O tamanho que me refiro é os pixels de altura e largura. Dependendo de onde a imagem vai aparecer, não ha espaço.

@Achileas
Copy link

it seems a lot of image loading issues got to do with proper indentation. I have loaded bigger images i takes longer to load the file but works. if it helps anybody

@angamaly
Copy link

image

@angamaly
Copy link

thanks for all, now its working

@vicsystems55
Copy link

If any of you using Windows \ rather than /, worked for me!!!

this worked for me too

@fmatosqg
Copy link
Contributor

Please don't use back slashes, 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 back slashes or treat them as escape character sequence. Then your own project won't compile anywhere.

@simbakowo
Copy link

so basically it's a "sometimes it works sometimes it doesn't" type of thing. what is this

@hello-addweb
Copy link

  • inside pubspec.yaml, DON'T USE TAB!

  • and make sure please mention all the directory here or else it will not work.

flutter:
<space><space>assets:
<space><space><space><space>assets/

example:

flutter:
  assets:
    assets/

@vicsystems55
Copy link

ok

@maikeriva
Copy link

maikeriva commented Apr 9, 2021

Encountered this issue when following the Flutter layout tutorial at https://flutter.dev/docs/development/ui/layout/tutorial

Once got to "Step 5: Implement the image section" I followed the instructions but made a typo on the pubspec.yaml (wrote "images/lage.jpg" rather than "images/lake.jpg"), saved, and triggered a hot reload. Obviously I got an error related to the typo, but even after fixing it and triggering another hot-reload I got into the error everyone here is complaining about.

Turns out that to get rid of it even AFTER fixing the typo in pubspec.yaml I had to trigger a full rebuild (STOP button then PLAY button in Android Studio interface) rather than using hot-reload.

@Suresh-FullStackDeveloper

when images not loaded into app encountered this issue in pubspec.yml file paste uses-material-design: true

To add assets to your application, add an assets section, like this:

assets:
- assets/logo.png
-

@kailashrjprht
Copy link

Launching lib\main.dart on Custom in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...
I/FlutterActivityDelegate( 1811): onResume setting current activity to this
I/Choreographer( 1811): Skipped 189 frames!  The application may be doing too much work on its main thread.
D/        ( 1811): HostConnection::get() New Host Connection established 0xed208640, tid 1831
I/flutter ( 1811): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter ( 1811): The following assertion was thrown resolving an image codec:
I/flutter ( 1811): Unable to load asset: image/chubby.jpg
I/flutter ( 1811): 
I/flutter ( 1811): When the exception was thrown, this was the stack:
I/flutter ( 1811): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 1811): <asynchronous suspension>
I/flutter ( 1811): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:383:44)
I/flutter ( 1811): <asynchronous suspension>
I/flutter ( 1811): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:368:14)
I/flutter ( 1811): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:86)
I/flutter ( 1811): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:82:22)
I/flutter ( 1811): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:265:63)
I/flutter ( 1811): (elided 8 frames from package dart:async)
I/flutter ( 1811): 
I/flutter ( 1811): Image provider: AssetImage(bundle: null, name: "image/chubby.jpg")
I/flutter ( 1811): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#9a4b0(), name: "image/chubby.jpg", scale:
I/flutter ( 1811): 1.0)
I/flutter ( 1811): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/Choreographer( 1811): Skipped 45 frames!  The application may be doing too much work on its main thread.
Syncing files to device Custom...

Just make sure your data connection is on

@github-actions
Copy link

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 Jul 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests