3

I am building a flutter app and an asset image won't load when I run the app on my phone, but it loads fine when I run the app on the emulator.

Here's the error I get:

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

And here's my pubspec.yaml

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

Here's main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
          title: Text('Picture Motivation'),
        ),
        body: Center(
          child: Image(
            image: AssetImage('images/diamond.png'),
          ),
        ),
      ),
    ),
  );
}

What's very confusing is why the image is loading correctly on the emulator and not on the physical device. Any clue?

Thanks a lot.

Giulia
  • 765
  • 2
  • 8
  • 33

1 Answers1

3

Do this step by step, and this should work just fine. Basically you're doing it in wrong way.

  1. Put the images in the assets folder, so the root is assets/diamond.png
  2. Or if you have another folder in your assets folder, images, then the root is assets/images/diamond.png

pubspec.yaml

flutter:
   uses-material-design: true
   //you have to give the proper path in order to get the image in your UI
   assets: 
     - assets/images/diamond.png

UI Code:

//this is how your image calling work, you just have to copy the path, same as pubspec.yaml
Center(
   child: Image(
      image: AssetImage('assets/images/diamond.png'),
   )
)

I am sure you will be able to get the image now. Let me know if that helps.

Alok
  • 8,452
  • 13
  • 55
  • 93
  • 2
    Hello @Alok! I can confirm that if I specify the entire path of the image in the pubspec.yaml, it renders properly even on the physical device! Thank you so much for the hint. By the way, isn't it supposed to fetch all the files if you just specify the asset folder name like I did previously? That's what it reads on the documentation... – Giulia Oct 11 '19 at 07:32
  • 1
    Well, to be precise, the device usually do not confirm to get the files from your folder, you need to specify the folder's name as well which is `assets`, this is a good practice, and will not lead you to any confusion, neither to the device as well. Here in `assets:`, it requires the data to be specified in the path, you can try doing this, I am not sure if it will work out or not, `assets: images/diamond.png`, and leave the rest same. – Alok Oct 11 '19 at 08:21