[Flutter] Ao introduzir imagens de rede, prompt: Failed host lookup: '[image host]'

Ao usar o componente NetworkImage para carregar imagens externas, Failed host lookup: '[图片host]'um erro é exibido.

Direção de investigação

1. Limpe o cache

solução:

1. Depois de tentar flutter cleanlimpar o cache
2. Reinstale dependênciasflutter pub get
3. Reconstrua o projeto. flutter create .
   Após concluir as três etapas acima, inicie o aplicativo novamente e descubra que as imagens podem ser carregadas normalmente.

2. Verifique a rede do dispositivo

3. Nenhuma permissão de rede configurada

Configure as permissões na tag android/src/main/AndroidManifest.xmldo meio :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. Imagens suportam vários domínios

Se o projeto estiver sendo executado no Chrome, confirme se o nome de domínio onde a imagem está localizada suporta vários domínios.

Você pode ficar confuso. Normalmente, os recursos de imagem são marcados diretamente pelo navegador imgou cssusados ​​para backgrounddefinir imagens de plano de fundo. Nesses cenários, o navegador não ativa a política de mesma origem, portanto, não há necessidade de considerar problemas entre domínios.

Porém, os recursos de imagem no Flutter são xhrobtidos pelos componentes por meio de solicitações, portanto, é necessário garantir que xhro método de obtenção dos recursos de imagem seja suportado pelo servidor.

O exemplo acima é para implantar o aplicativo no Chrome. Podemos ver que os recursos da imagem são obtidos por meio de solicitações xhr.

5. Use substituição de imagem local

Por exemplo: Para UserAccountsDrawerHeaderusar uma imagem local como avatar no , você pode seguir estas etapas:

1. Coloque os arquivos de imagem no diretório do projeto: primeiro, copie ou mova os arquivos de imagem locais para o local apropriado no projeto Flutter. Normalmente, você colocaria os arquivos de imagem em uma subpasta do diretório raiz do projeto, assets/images/por exemplo.
2. Configure o caminho da imagem no pubspec.yamlarquivo: Abra o pubspec.yamlarquivo do projeto e configure nele o caminho da imagem. Adicione uma assetsseção e adicione o caminho do arquivo de imagem ou o caminho do diretório de imagem a ela, assim:

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

3. UserAccountsDrawerHeaderUse o widget Image.asset para exibir imagens locais .

Aqui está um exemplo que demonstra como usar uma imagem local como avatar em 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
            ],
          ),
        ),
      ),
    );
  }
}