Flutter圆形图片加载失败：Exception: Invalid image data问题求助

• 异常信息：Exception: Invalid image data
• 应用界面：
  
• 需求：在圆形组件中加载图片，但加载失败，抛出上述异常。
• 相关代码片段：

Widget build(BuildContext context) {
    final imageUrl ="https://www.google.com/imgres?imgurl=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4E03AQHQw81O6YMl0g%2Fprofile-displayphoto-shrink_200_200%2F0%2F1689344752868%3Fe%3D2147483647%26v%3Dbeta%26t%3DeXZBbFDnXIU3-Mo0nTT539nyi7w0eHA9EYl8P1rW_cs&tbnid=mMbVxxezSlgR6M&vet=12ahUKEwj7nPnZ0LKEAxXbS2wGHTURBHkQMygAegQIARBI..i&imgrefurl=https%3A%2F%2Fin.linkedin.com%2Fin%2Fsaumya-sura-a73734270&docid=3yOB7YRgEd_KcM&w=200&h=200&q=saumya%20sura&ved=2ahUKEwj7nPnZ0LKEAxXbS2wGHTURBHkQMygAegQIARBI";
    return Drawer(
      child:Container(
        color:Colors.deepPurple ,

你的问题根源是使用的imageUrl并非直接的图片资源链接，而是谷歌图片搜索的结果页面链接，Flutter无法将网页内容解析为图片数据，因此抛出“无效的图片数据”异常。

具体修复步骤： #

1. 提取真实图片链接
   从现有imageUrl的imgurl参数中解码出真实图片地址：
   https://media.licdn.com/dms/image/D4E03AQHQw81O6YMl0g/profile-displayphoto-shrink_200_200/0/1689344752868?e=2147483647&v=beta&t=eXZBbFDnXIU3-Mo0nTT539nyi7w0eHA9EYl8P1rW_cs

2. 替换并实现圆形图片
   将代码中的imageUrl替换为上述真实链接，同时使用CircleAvatar或ClipOval实现圆形图片效果，示例代码如下：

Widget build(BuildContext context) {
    final imageUrl = "https://media.licdn.com/dms/image/D4E03AQHQw81O6YMl0g/profile-displayphoto-shrink_200_200/0/1689344752868?e=2147483647&v=beta&t=eXZBbFDnXIU3-Mo0nTT539nyi7w0eHA9EYl8P1rW_cs";
    return Drawer(
      child: Container(
        color: Colors.deepPurple,
        child: Center(
          // 方案1：使用CircleAvatar快速实现圆形图片
          child: CircleAvatar(
            radius: 50,
            backgroundImage: NetworkImage(imageUrl),
            // 加载失败时的占位图标
            child: const Icon(Icons.person, size: 50),
          ),

          // 方案2：使用ClipOval自定义圆形图片
          // child: ClipOval(
          //   child: Image.network(
          //     imageUrl,
          //     width: 100,
          //     height: 100,
          //     fit: BoxFit.cover,
          //     errorBuilder: (context, error, stackTrace) {
          //       return const Icon(Icons.person, size: 50);
          //     },
          //   ),
          // ),
        ),
      ),
    );
}

3. 额外建议

• 确保设备可正常访问该图片链接，若存在网络限制，替换为可访问的图片资源。
• 添加加载失败的占位UI，避免因图片加载失败导致界面异常。

内容的提问来源于stack exchange，提问作者careeer