[Flutter] Al introducir imágenes de red, aparece el mensaje: Búsqueda de host fallida: '[host de imagen]'

Cuando se utiliza el componente NetworkImage para cargar imágenes externas, Failed host lookup: '[图片host]'se genera un error.

Dirección de investigación

1. Borrar caché

solución:

1. Después de intentar flutter cleanborrar el caché
2. Reinstalar dependenciasflutter pub get
3. Reconstruya el proyecto. flutter create .
   Después de completar los tres pasos anteriores, inicie la aplicación nuevamente y descubra que las imágenes se pueden cargar normalmente.

2. Verifique la red del dispositivo

3. No hay permisos de red configurados

Configure los permisos en la etiqueta android/src/main/AndroidManifest.xmldel medio :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. Las imágenes admiten dominios cruzados

Si el proyecto se ejecuta en Chrome, confirme si el nombre de dominio donde se encuentra la imagen admite dominios cruzados.

Puede que estés confundido. Normalmente, los recursos de imágenes son etiquetados directamente por el navegador imgo cssse usan para backgroundconfigurar imágenes de fondo. En estos escenarios, el navegador no habilita la política del mismo origen, por lo que no hay necesidad de considerar problemas entre dominios.

Sin embargo, los recursos de imágenes en Flutter los xhrobtienen los componentes a través de solicitudes, por lo que debe asegurarse de que xhrel servidor admita el método para obtener recursos de imágenes.

El ejemplo anterior es implementar la aplicación en Chrome. Podemos ver que los recursos de la imagen se obtienen a través de solicitudes xhr.

5. Utilice el reemplazo de imágenes local

Por ejemplo: para UserAccountsDrawerHeaderusar una imagen local como avatar en , puedes seguir estos pasos:

1. Coloque los archivos de imagen en el directorio del proyecto: primero, copie o mueva sus archivos de imagen locales a la ubicación adecuada en el proyecto Flutter. Normalmente, colocaría archivos de imagen en una subcarpeta del directorio raíz del proyecto, assets/images/por ejemplo.
2. Configure la ruta de la imagen en pubspec.yamlel archivo: abra el pubspec.yamlarchivo del proyecto y configure la ruta de la imagen en él. Agregue una assetssección y agregue la ruta del archivo de imagen o la ruta del directorio de imágenes, así:

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

3. UserAccountsDrawerHeaderUtilice el widget Image.asset para mostrar imágenes locales .

A continuación se muestra un ejemplo que demuestra cómo utilizar una imagen local como avatar en 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
            ],
          ),
        ),
      ),
    );
  }
}