Why this image can't be loaded whenever online Javascript code editor/interpreter is used?

Issue

It seems it has to do something with AmazonAWS, perhaps those services use it.
I tried to load this image in UI using DartPad (Flutter mode). There are always exceptions or error when trying to render that image.

The code:

import 'package:flutter/material.dart';


void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body:  Image(
  image: NetworkImage('https://www.nasa.gov/images/content/162056main_PIA08329.jpg'),
      ),),
    );
  }
}

Solution

CanvasKit renderer needs access to image data, but the image is not available in other domains.

See Cross-origin images for details.

Answered By – user18309290

Answer Checked By – David Goodson (FlutterFixes Volunteer)