CODEWITHSUNDEEP
flutterimage
Kashuf Hameed
Kashuf Hameed

Reputation: 23

Network Image is not being shown in circle avatar flutter

I am using mac os for flutter. network image is not displayed. it gives an error.

I have tried on both android and iOS emulators. Code:

CircleAvatar(
  radius: 40,
  backgroundImage: NetworkImage("https://en.wikipedia.org/wiki/Emma_Watson#/media/File:Emma_Watson_2013.jpg"),
),

Output:

flutter:

════════ Exception caught by image resource service ════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

Upvotes: 0

Views: 1109

Answers (3)

Kumar Lokesh Rathod
Kumar Lokesh Rathod

Reputation: 705

Try below code's

With CircleAvatar

CircleAvatar(
radius: 40,
child: ClipOval(
    child: Image.network(
      'https://upload.wikimedia.org/wikipedia/commons/7/7f/Emma_Watson_2013.jpg',
    ),
),
),

With ClipOval

ClipOval(
  child: Image.network(
   'https://upload.wikimedia.org/wikipedia/commons/7/7f/Emma_Watson_2013.jpg',
   width: 100,
   height: 100,
   fit: BoxFit.cover,
  ),
),

Upvotes: 3

Prashant
Prashant

Reputation: 676

Your url is pointing to image in WebView. You need to specify exact image resource link

Try with this link: https://upload.wikimedia.org/wikipedia/commons/7/7f/Emma_Watson_2013.jpg

To get exact image resource path, right Click on Image and Click on Copy Image Address

Try this code:

CircleAvatar(
radius: 40,
backgroundImage: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/7/7f/Emma_Watson_2013.jpg"),
              ),

Upvotes: 1

Kaushik Chandru
Kaushik Chandru

Reputation: 17772

The url you have used is for the preview of the image.. Open the image in a new tab and you should be getting a url like this

"https://upload.wikimedia.org/wikipedia/commons/7/7f/Emma_Watson_2013.jpg"

Upvotes: 0

Related Questions