How to display image which comes from API response in flutter

Question

I'm trying to display the image which i get from api response.

here my api response look like

{
            "id": 40,
            "user_id": 49,
            "contact_person": "fss",
            "relation": "dfs",
            "phone": "dsf",
            "image": "emergency/1735859198927595.jpg",
            "created_at": "2022-06-17T05:38:54.000000Z",
            "updated_at": "2022-06-17T05:38:54.000000Z"
        },

and displaying it on listtile leading like this

ListTile(leading: SizedBox(height: 50,width: 50,
         child: Image.network(emergencyContact[index].image))

but it gives me this error

Exception caught by image resource service ════════════════════════════
Invalid argument(s): No host specified in URI file:///emergency/1735859198927595.jpg

please help how to fix this issue.

Answer 1

your image url is not.network url, it should start with https or http other wise it will not work

String url = https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png;

ListTile(leading: SizedBox(height: 50,width: 50,
     child: Image.network(url))

Answer 2

So the Exception Error explains very well that you did not provide your host: https://your.site.com/image-path.png

Please append https://your.site.com/${emergencyContact[index].image}

ListTile(leading: SizedBox(height: 50,width: 50,
         child: Image.network(`https://your.site.com/${emergencyContact[index].image}`))