Flutter Web使用Canvaskit渲染器时网络图片无法显示求助

常见修复方案 #

• 解决跨域资源共享(CORS)限制
  Canvaskit模式对浏览器CORS策略的遵循更严格，若图片服务器未配置允许当前域名的跨域请求，会导致加载失败。

  • 要求图片服务器配置Access-Control-Allow-Origin响应头，开发环境可临时设为*，生产环境需指定你的Web域名。
  • 开发调试时，可关闭Chrome的CORS检查（仅用于调试，生产环境禁止）：

    chrome --disable-web-security --user-data-dir="/tmp/chrome_dev_session"
    

    用该Chrome实例运行Flutter项目即可。

• 检查图片URL合法性
  确认图片链接完整有效，避免HTTPS/HTTP混合加载问题：若你的Flutter Web以HTTPS部署，加载HTTP图片会被浏览器拦截。

  • 统一使用HTTPS协议的图片链接；开发环境可通过chrome://flags/#allow-insecure-localhost开启本地混合内容允许。

• 清理项目缓存后重新构建
  执行以下命令清理缓存并重新运行项目：

  flutter clean
  flutter pub get
  flutter run -d chrome --web-renderer=canvaskit
  

• 添加请求头访问受限制的图片
  若图片服务器需要特定请求头（如权限验证），在Image.network中配置对应headers：

  Image.network(
    'https://example.com/image.jpg',
    headers: {'Authorization': 'Bearer your_access_token'},
  )
  

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