Flutter中CircleAvatar无法显示网络图片问题求助

问题原因 #

你使用的URL是维基百科的条目页面链接，而非图片的直接资源地址。NetworkImage要求传入的是直接指向图片文件的URL（如带.jpg/.png后缀的资源链接），但你提供的链接返回的是HTML网页内容，不是图片数据，因此触发了“Invalid image data”异常。

解决方案 #

获取图片的直接资源URL，替换原有链接：

1. 打开你引用的维基百科图片页面，通过右键图片选择“复制图片地址”获取直接下载链接
2. 将直接图片URL传入NetworkImage

修改后的代码示例 #

CircleAvatar(
  radius: 40,
  backgroundImage: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Emma_Watson_2013.jpg/1200px-Emma_Watson_2013.jpg"),
),

验证要点 #

• 先将图片URL粘贴到浏览器，确认能直接显示图片后再用于代码
• 检查模拟器网络是否正常，排除代理、防火墙等拦截问题

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