Exception: Could not instantiate image codec in Flutter

Question

I'm working on a small app that takes an image from the internet and shows it on the screen using the NetworkImage() widget. My code looks like this:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("I am Rich"),
        backgroundColor: Colors.blueGrey[900],
      ),
      backgroundColor: Colors.blueGrey[200],
      body: Center(
        child: Image(
          image: NetworkImage(
              'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.w3schools.com%2Fw3css%2Fw3css_images.asp&psig=AOvVaw2IxwyCZa7VaOiLr2lA9R2d&ust=1584460177773000&source=images&cd=vfe&ved=2ahUKEwjS8NyhrJ_oAhXt7uAKHURADeMQjRx6BAgAEAc'),
        ),
      ),
    ),
  ));
}

At first there appeared to be a SocketException which I tried to solved by this answer by putting the line of code here:

Now, as I run the emulator again, it ends with:

Performing hot restart...
Syncing files to device Android SDK built for x86...
Restarted application in 31,602ms.

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Could not instantiate image codec.

When the exception was thrown, this was the stack: 
#0      _futurize (dart:ui/painting.dart:4304:5)
#1      instantiateImageCodec (dart:ui/painting.dart:1682:10)
#2      PaintingBinding.instantiateImageCodec (package:flutter/src/painting/binding.dart:88:12)
#3      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:104:20)
<asynchronous suspension>
...
Image provider: NetworkImage("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.w3schools.com%2Fw3css%2Fw3css_images.asp&psig=AOvVaw2IxwyCZa7VaOiLr2lA9R2d&ust=1584460177773000&source=images&cd=vfe&ved=2ahUKEwjS8NyhrJ_oAhXt7uAKHURADeMQjRx6BAgAEAc", scale: 1.0)
Image key: NetworkImage("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.w3schools.com%2Fw3css%2Fw3css_images.asp&psig=AOvVaw2IxwyCZa7VaOiLr2lA9R2d&ust=1584460177773000&source=images&cd=vfe&ved=2ahUKEwjS8NyhrJ_oAhXt7uAKHURADeMQjRx6BAgAEAc", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

What is it that I'm missing here?

Solution 1

The url address you have provided in your network image doesn't point to actual image. Try to change it like so

image: NetworkImage('https://www.w3schools.com/w3css/img_lights.jpg')

Solution 2

after copying the image url, always check whether the url ends with '.jpg', '.png', etc or not... if it doesn't end with any valid extension which supports images you are going to get this error message... Try something like this :-

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("I am Rich"),
            backgroundColor: Colors.blueGrey[900],
          ),
          backgroundColor: Colors.blueGrey[200],
          body: Center(
            child: Image(
              image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg'),
            ),
          ),
        ),
      ),
    );

Comments

[ryan.s]

I am going through the same series of tutorials. I tried to get the address of an images from google images. That is why it happened for me as the image I was selecting had an address of a search on shutterstock. This was quite confusing but makes so much sense why the app couldn't turn a whole website into an image.