无法加载YouTube缩略图Flutter Web的网络图像

Question

我正试图在我最新的Flutter项目(https://pub.dev/packages/youtube_plyr_iframe)中实现Youtube Plyr IFrame插件。一切工作期望我无法从网站来源(https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg)获取视频缩略图。我已经把问题缩小到image。network构造函数。我可以用这个小工具加载其他图像，但每当它涉及到YouTube缩略图时，它就会给我这个错误:

════════ Exception caught by image resource service ════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
When the exception was thrown, this was the stack
Image provider: NetworkImage("https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg", scale: 1)
Image key: NetworkImage("https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg", scale: 1)
════════════════════════════════════════════════════════════════════════════════

我不知道这是怎么回事。奇怪的是，Flutter包中的示例页面工作得很好，请参阅此处(https://jonatadashi.github.io/Web-Example/#/)。如果我的问题还不够令人沮丧，我就把flutter.dev上的交互式示例放在现有代码中，它工作得很好(https://flutter.dev/docs/cookbook/images/network-image)。Youtube Plyr IFrame包不需要任何API，我能够在基本的html文件中成功地拉出图像。

我代码:

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Image.network(
'https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg'),
),
);
}
}

这里是一个图像url与我的代码工作:https://picsum.photos/250?image=9

Answer 1

我通过使用html渲染器解决了这个问题。我不能把这个功劳，但这里是另一个堆栈溢出线程，我找到了答案:https://stackoverflow.com/a/66617476/14670765

flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build

Answer 2

如在web上显示图像中所述，这可能是由于CORS。

如果你尝试用--disable-web-security标志调试你的应用程序，它应该工作。

1. 创建一个批处理文件，其中包含使用--disable-web-security启动Google Chrome的命令:

"c:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --user-data-dir="C:Usersusernamechrome-temp" %*

2. 创建或更新CHROME_EXECUTABLE环境变量以重定向到批处理文件

注意:这可能会影响您的测试和应用程序在调试和发布之间的行为。

裁判:https://github.com/flutter/flutter/issues/46904