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)

...
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?

user_11618112 · Answer

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

user_10943316 · Answer

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

Exception: Could not instantiate image codec in Flutter

2 Answers