Flutter Web中NetworkImage无法显示图片，提示[object Event]求助

核心原因 #

这个问题仅出现在Flutter Web端，本质是浏览器的同源策略（CORS）限制，或是Flutter Web的Image组件对部分图片URL的处理逻辑与移动端存在差异。移动端App不受浏览器同源策略约束，因此能正常加载图片。

具体解决步骤 #

1. 排查CORS限制

打开浏览器控制台（F12），查看是否存在类似No 'Access-Control-Allow-Origin' header is present on the requested resource的错误：

• 若图片服务器由你维护，直接在服务器配置中添加允许你的Flutter Web域名的CORS规则；
• 若为第三方服务器，无法修改其CORS配置，只能通过代理中转请求。

2. 搭建本地代理中转图片请求

通过后端代理转发图片请求，绕过CORS限制。以下是一个简单的Node.js代理示例：

const express = require('express');
const request = require('request');
const app = express();

// 代理图片请求
app.get('/proxy-image', (req, res) => {
  const targetUrl = req.query.url;
  // 转发请求并设置允许跨域的响应头
  request.get(targetUrl)
    .on('response', (response) => {
      res.setHeader('Access-Control-Allow-Origin', '*');
    })
    .pipe(res);
});

app.listen(3000, () => {
  console.log('代理服务运行在 http://localhost:3000');
});

在Flutter中使用代理后的URL：

Image.network("http://localhost:3000/proxy-image?url=https://cdn2.ppomppu.co.kr/zboard/data3/2024/0612/20240612153148_6FinzEg08D.jpg")

3. 处理图片URL格式

• 直接在浏览器地址栏打开图片URL，确认是否能正常显示；
• 对包含特殊字符的URL进行编码，使用Uri.encodeFull()处理：

Image.network(Uri.encodeFull("https://cdn2.ppomppu.co.kr/zboard/data3/2024/0612/20240612153148_6FinzEg08D.jpg"))

4. 用原生HTML img标签替代Image.network

通过HtmlElementView嵌入原生img标签，绕开Flutter Web Image组件的限制：

import 'dart:html' as html;
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class NativeImage extends StatelessWidget {
  final String imageUrl;
  final double? width;
  final double? height;

  const NativeImage({
    super.key,
    required this.imageUrl,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    // 创建原生img元素
    final imgElement = html.ImageElement()
      ..src = imageUrl
      ..style.width = width != null ? '${width}px' : 'auto'
      ..style.height = height != null ? '${height}px' : 'auto'
      ..style.objectFit = 'cover';

    // 注册视图工厂
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int viewId) => imgElement,
    );

    return SizedBox(
      width: width,
      height: height,
      child: HtmlElementView(viewType: imageUrl),
    );
  }
}

使用方式：

NativeImage(
  imageUrl: "https://cdn2.ppomppu.co.kr/zboard/data3/2024/0612/20240612153148_6FinzEg08D.jpg",
  width: 150,
  height: 150,
)

内容的提问来源于stack exchange，提问作者박용석