Flutter Web使用Image.network加载YouTube缩略图触发ImageCodecException

• 报错仅触发于Flutter Web运行环境，原生Android/iOS端加载该类图片链接不会出现跨域类报错
• 报错本质是Flutter Web的图片解码逻辑会将网络图片拉取为Blob对象后交由Canvas处理，这一流程受浏览器跨域规则、站点内容安全策略（CSP）的严格约束，和普通HTML页面直接用<img>标签加载图片的规则存在差异——纯HTML的跨域图片展示不受CORS的图片加载限制，因此测试基础HTML页面时能正常拉取图片
• 插件示例、Flutter官方交互式示例能正常加载同类YouTube缩略图，是因为这些站点已预先配置了允许加载ytimg.com域名资源的CSP规则，而本地项目未做对应配置，因此触发浏览器拦截
• 能正常加载picsum.photos的图片，是因为该域名本身允许跨域资源共享，且未触发当前项目的CSP拦截规则

• 打开项目路径下web/index.html文件，在<head>标签内添加匹配的内容安全策略配置，将YouTube缩略图所属的ytimg.com域名加入图片资源加载白名单，参考配置代码：

  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'self'; img-src 'self' https://*.ytimg.com data:; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
  

• 修改配置后清除浏览器缓存、硬刷新页面（Windows/Linux按Ctrl+F5，macOS按Cmd+Shift+R），避免旧的拦截规则缓存导致配置不生效
• 若仍存在跨域报错，可替换图片加载实现：使用适配Flutter Web跨域逻辑的网络图片缓存组件，替换原生Image.network，无需修改请求头即可完成图片解码
• 注意：CSP配置不要直接使用*通配所有域名，按需开放所需的资源域名即可，避免引入安全风险

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