Flutter Web端Images列表网络图片无法加载显示问题求解

问题描述 #

• 开发的新闻App移动端运行正常，Web端无法加载第三方新闻站点图片，抛出ImageCodecException异常
• 问题根因：浏览器同源策略限制，未配置CORS的第三方图片资源无法被Flutter Web默认渲染逻辑加载
• 已尝试现有教程修复未成功，官方文档说明过于简略无法落地

报错原文：
======== 图片资源服务捕获到异常 ================================================
解析图片编解码器时抛出ImageCodecException异常：
加载网络图片失败。
图片URL：https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg
图片提供器：NetworkImage("https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg", scale: 1)
图片key：NetworkImage("https://nextbigfuture.s3.amazonaws.com/uploads/2021/09/Screen-Shot-2021-09-11-at-4.31.43-PM-1024x646.jpg", scale: 1) #

原有列表图片视图代码：

ClipRRect(
  borderRadius: BorderRadius.circular(9),
  child: Image.network(
    article.urlToImage,
    key: UniqueKey(),
    fit: BoxFit.cover,
    width: double.infinity,
    height: 200,
    loadingBuilder: (BuildContext context, Widget child,
        ImageChunkEvent? loadingProgress) {
      if (loadingProgress == null) return child;
      return Center(
        child: Container(
          width: double.infinity,
          height: 200,
          child: CircularProgressIndicator(
            color: Colors.lightBlueAccent,
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes!
                : null,
          ),
        ),
      );
    },
  ),
),

可落地解决方案 #

方案1：本地开发临时调试用 #

直接修改Flutter Web启动命令，禁用浏览器安全策略，跳过跨域检查：

flutter run -d chrome --web-browser-flag "--disable-web-security"

注意：该方案仅适用于本地开发调试，不可用于生产环境

方案2：生产环境用（代码改动最小） #

利用浏览器img标签天然支持跨域图片展示的特性，Web端改用HtmlImage渲染，移动端保留原有逻辑，完全避开CORS限制：

1. 顶部导入必要依赖，使用条件导入避免移动端编译报错：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
// 仅Web平台导入
import 'dart:html' as html;
import 'dart:ui' as ui;

2. 封装跨平台图片组件，替换原有Image.network：

Widget buildNetworkImage(String url, double width, double height, BoxFit fit) {
  if (kIsWeb) {
    // 注册平台视图
    ui.platformViewRegistry.registerViewFactory(
      url,
      (int viewId) => html.ImageElement()
        ..src = url
        ..style.width = '100%'
        ..style.height = '100%'
        ..style.objectFit = 'cover'
        ..style.border = 'none',
    );
    return HtmlElementView(
      key: UniqueKey(),
      viewType: url,
    );
  } else {
    // 移动端保留原有逻辑
    return Image.network(
      url,
      fit: fit,
      width: width,
      height: height,
    );
  }
}

3. 修改原有代码，替换Image.network为封装后的组件，保留加载逻辑：

ClipRRect(
  borderRadius: BorderRadius.circular(9),
  child: SizedBox(
    width: double.infinity,
    height: 200,
    child: kIsWeb
        ? buildNetworkImage(article.urlToImage, double.infinity, 200, BoxFit.cover)
        : Image.network(
            article.urlToImage,
            key: UniqueKey(),
            fit: BoxFit.cover,
            width: double.infinity,
            height: 200,
            loadingBuilder: (BuildContext context, Widget child,
                ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) return child;
              return Center(
                child: Container(
                  width: double.infinity,
                  height: 200,
                  child: CircularProgressIndicator(
                    color: Colors.lightBlueAccent,
                    value: loadingProgress.expectedTotalBytes != null
                        ? loadingProgress.cumulativeBytesLoaded /
                            loadingProgress.expectedTotalBytes!
                        : null,
                  ),
                ),
              );
            },
          ),
  ),
),

方案3：生产环境用（兼容CanvasKit渲染） #

如果需要使用CanvasKit渲染模式，自行部署轻量CORS代理服务，代理服务逻辑为：接收图片URL参数，服务端请求对应图片资源后添加Access-Control-Allow-Origin: *响应头返回，将原有图片URL替换为代理服务拼接后的地址即可，无需改动其他渲染逻辑。 #

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