CODEWITHSUNDEEP
imageflutterdartwebnetwork-programming
Anthony Barbosa
Anthony Barbosa

Reputation: 61

Unable to load network image of a YouTube thumbnail Flutter Web

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

Upvotes: 1

Views: 4647

Answers (2)

Anthony Barbosa
Anthony Barbosa

Reputation: 61

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

Upvotes: 3

Thierry
Thierry

Reputation: 8393

As described in Displaying images on the web, this is probably due to CORS.

If you try to Debug your application using Google Chrome with --disable-web-security flag it should work.

  1. Create a batch file containing the command to launch Google Chrome with --disable-web-security:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\username\chrome-temp" %*
  1. Create or update CHROME_EXECUTABLE environment variable to redirect to your batch file.

Note: this might affect your tests and the behavior of your application between debug and release.

ref: https://github.com/flutter/flutter/issues/46904

Upvotes: 0

Related Questions