Flutter Web中使用kTransparentImage的FadeInImage报错求助

问题根源及修复方案 #

1. 目标图片存在防盗链拦截 #

你使用的istockphoto图片大概率有防盗链机制，Web端请求时返回的不是有效图片数据，导致解析时出现"Unexpected end of image"错误。

• 修复：替换为无防盗链的公共图片，比如：

  image: 'https://picsum.photos/200/200',
  

2. kTransparentImage的Web兼容性问题 #

kTransparentImage是内存中的1x1透明PNG，部分Flutter Web环境下会出现解析异常。

• 修复：改用FadeInImage.assetNetwork，搭配本地透明占位图：
  1. 先在pubspec.yaml中声明资源：

     assets:
       - assets/images/transparent.png
     

  2. 替换代码：

     FadeInImage.assetNetwork(
       height: 200,
       width: 200,
       placeholderErrorBuilder: (context, error, stackTrace) {
         print(error);
         return const SizedBox.shrink();
       },
       placeholder: 'assets/images/transparent.png',
       image: 'https://picsum.photos/200/200',
     )
     

3. 启用CORS支持（本地开发） #

如果必须使用原图片，可在启动Flutter Web时添加CORS参数：

flutter run -d chrome --enable-cors

4. 升级Flutter到稳定版 #

部分旧版本Flutter Web对FadeInImage.memoryNetwork的处理存在bug，执行升级：

flutter upgrade

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