Unable to load network image of a YouTube thumbnail Flutter Web

Question

I am trying to implement the Youtube Plyr IFrame plugin in my latest Flutter project( https://pub.dev/packages/youtube_plyr_iframe). Everything works expect I am unable to fetch the video thumbnail from the website source (https://i3.ytimg.com/vi/TyimCGEkiUc/maxresdefault.jpg). I've narrowed the problem down to the Image.network constructor. I am able to load other images with this widget but whenever it comes to a YouTube thumbnail it gives me this error:

════════ 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)
════════════════════════════════════════════════════════════════════════════════

I am not sure what to make of this. The odd thing is that the example page featured in the Flutter package works fine, see here (https://jonatadashi.github.io/Web-Example/#/). If my problem wasn't frustrating enough I messed with the Interactive example on flutter.dev putting my link into the existing code and it worked completely fine (https://flutter.dev/docs/cookbook/images/network-image). The Youtube Plyr IFrame package does not require any API and I am able to pull the image successfully in a basic html file.

My Code:

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'),
      ),
    );
  }
}

Here is an image url that works with my code: https://picsum.photos/250?image=9

Solution

I solved this problem by using html renderer. I cannot take credit for this however here is another Stack Overflow thread where I found the answer: 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

Comments

[Lenin Zapata]

This works but you have to do it every time you compile it, it is not optimal. It should be fully fixed but only does it at runtime