Network Image is not being shown in circle avatar flutter-CodePudding

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

CodePudding user response：

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,
  ),
),

CodePudding user response：

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"),
              ),

CodePudding user response：

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"