Flutter模拟器图片无法显示，抛出Exception: Invalid Image Data异常

问题根源 #

你遇到的Exception: Invalid Image Data异常，核心原因是使用了Unsplash的网页链接，而非直接的图片资源链接。Image.network组件要求传入的URL必须能直接返回图片二进制数据，但你当前的链接指向的是Unsplash的图片详情页（HTML页面），并非图片本身，因此无法被解析为有效图片。

解决方案 #

1. 替换为图片直链
   每个Unsplash图片都有对应的直接资源链接，格式通常为https://images.unsplash.com/photo/[图片ID]?[参数]。获取方式：打开目标图片的Unsplash页面，右键点击图片选择「复制图片地址」，即可得到可直接使用的图片URL。

2. 修改后的代码示例

class CarouselBuild extends Stateful Widget {
  CarouselBuild({Key? key}) : super(key: key);

  @override
  State<CarouselBuild> createState() => _CarouselBuildState();
}

class _CarouselBuildState extends State<CarouselBuild> {
  // 替换为正确的图片直链（示例为对应你提供的三张图片的直链）
  final urlImages = [
    'https://images.unsplash.com/photo-1620712943543-6e69a069b782?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80',
  ];
  
  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      options: CarouselOptions(
        enlargeCenterPage: true,
        autoPlay: true,
        aspectRatio: 2.0,
      ),
      itemCount: urlImages.length,
      itemBuilder: (context, index, realIndex) {
        final urlImage = urlImages[index];
        return buildImage(urlImage, index);
      },
    );
  }

  Widget buildImage(String urlImage, int index) => Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height * 0.3,
        margin: EdgeInsets.symmetric(horizontal: 0),
        color: Colors.grey,
        child: Image.network(
          urlImage,
          fit: BoxFit.cover,
          // 可选：添加错误占位，避免加载失败时空白
          errorBuilder: (context, error, stackTrace) {
            return Center(child: Text('图片加载失败'));
          },
        ),
      );
}

额外建议 #

• 验证图片链接有效性：可以直接在浏览器中打开链接，确认显示的是图片而非网页。
• 添加错误处理：通过errorBuilder参数在图片加载失败时显示提示，提升用户体验。

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