无法加载 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 上的 Interactive 示例弄乱了，将我的链接放入现有代码中，它完全可以正常工作 (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'),
      ),
    );
  }
}

这是一个适用于我的代码的图片网址：https://picsum.photos/250?image=9

Answer 1

如Displaying images on the web 中所述，这可能是由于 CORS。

如果您尝试使用带有 --disable-web-security 标志的 Google Chrome 调试您的应用程序，它应该可以工作。

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

"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\username\chrome-temp" %*

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

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

参考：https://github.com/flutter/flutter/issues/46904

Answer 2

我通过使用 html 渲染器解决了这个问题。我对此不以为然，但是这是另一个 Stack Overflow 线程，我在其中找到了答案： 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