[Flutter] When introducing network images, prompt: Failed host lookup: '[image host]'

When using the NetworkImage component to load external images, Failed host lookup: '[图片host]'an error is prompted.

Investigation direction

1. Clear cache

solution:

1. After trying flutter cleanto clear cache
2. Reinstall dependenciesflutter pub get
3. Rebuild the project. flutter create .
   After completing the above three steps, start the app again and find that the images can be loaded normally.

2. Check the device network

3. No network permissions configured

Configure the permissions in the android/src/main/AndroidManifest.xmlmiddle tag:manifest

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

4. Images support cross-domain

If the project is running in Chrome, confirm whether the domain name where the image is located supports cross-domain.

You may be confused. Normally, image resources are tagged directly by the browser img, or cssused to backgroundset background images. In these scenarios, the browser does not enable the same-origin policy, so there is no need to consider cross-domain issues.

However, the image resources in Flutter are xhrobtained by components through requests, so you need to ensure that xhrthe method of obtaining image resources is supported by the server.

The above example is to deploy the app to chrome. We can see that the image resources are obtained through xhr requests.

5. Use local image replacement

For example: To UserAccountsDrawerHeaderuse a local image as an avatar in , you can follow these steps:

1. Put the image files into the project directory: First, copy or move your local image files to the appropriate location in the Flutter project. Typically, you would place image files in a subfolder of the project root directory, assets/images/e.g.
2. Configure the image path in pubspec.yamlthe file: Open the project's pubspec.yamlfile and configure the image path in it. Add a assetssection and add the image file path or image directory path to it, like this:

flutter:
  assets:
    - assets/images/your_image.png
    - assets/images/

3. UserAccountsDrawerHeaderUse the Image.asset widget in to display local images .

Here is an example that demonstrates how to use a local image as an avatar in UserAccountsDrawerHeader:

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawer Example'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountName: Text('John Doe'),
                accountEmail: Text('[email protected]'),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: AssetImage('assets/images/your_image.png'),//--here
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
    
    
                  // Handle item 1 tap
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
    
    
                  // Handle item 2 tap
                },
              ),
              // Add more list items as needed
            ],
          ),
        ),
      ),
    );
  }
}