Flutter image is not showing

Question

I want to show some local image and display it on the screen like this:

 Image(image: AssetImage('assets/images/addFood.png'))

But I cannot see the image on the screen and I am getting no error at all.

Here is what I have done:

In my pubspec.yaml I have added my image folder like this:

  assets:
    - lib/assets/images/

The image named "addFood" is inside images folder as you can see here:

I want to display a simple text with image under it, I can see the text on the screen and I am doing it like this:

  Widget build(BuildContext context) {

    if (favoriteMeals.isEmpty)

    return Column(children: <Widget>[
      Text('no favorites',style: Theme.of(context).textTheme.title,),
      Image(image: AssetImage('assets/images/addFood.png'))
    ]);

    else{
     ......
     ......
     ......
   }

All I can see is the text without the image:

solutions that did not help in my case:

AssetImage is not not displaying image in flutter app

Adding assets and images

mage Not Appearing when Using "new Image.asset" inside a Column

How can I fix it and make sure that the image will be displayed on the screen?

Do you really want to put your assets in `lib`? It adds unnecessary complexity to do that so I would recommend to move it up to the root unless there is a good reason to do that. — Christopher Moore, Jul 25 '20 at 15:10
@ChristopherMoore . I don't have any preference regarding where to put my assets folder. what do you mean by unnecessary complexity? could you elaborate? — Tamir Abutbul, Jul 25 '20 at 15:17
Oh sorry it seems that's only for assets from other packages. — Christopher Moore, Jul 25 '20 at 15:20

score 3 · Accepted Answer · answered Jul 25 '20 at 15:23

You need to provide the full path for an asset when accessing it within the code. Nothing is implied when accessing the assets. Your actual path is lib/assets/images/, but you only do assets/images/. Change your code to include this:

Image(image: AssetImage('lib/assets/images/addFood.png'))

score 1 · Answer 2 · answered Jul 25 '20 at 15:05

1

It should be

flutter:
   assets:
     - assets/images/

Remove lib from pubspec.yaml path. And to get image in code use,

Image.asset('assets/images/lake.jpg')

answered Jul 25 '20 at 15:05

Ankit Tale

1,924
4
17
30

This would not work, check Christopher @Moore answer – Tamir Abutbul Jul 25 '20 at 15:31
Why? I am not getting it – Ankit Tale Jul 25 '20 at 16:12

score 0 · Answer 3 · answered Jul 25 '20 at 15:01

0

Update pubspec.yaml file like this

   assets:
     - directory/subdirectory/

answered Jul 25 '20 at 15:01

Subair K

1,760
1
11
31

Flutter image is not showing

Here is what I have done:

solutions that did not help in my case:

3 Answers3