[Flutter] ネットワークイメージを導入するときに、プロンプトが表示されます: Failed host lookup: '[image host]'

NetworkImageコンポーネントを使用して外部イメージをロードすると、Failed host lookup: '[图片host]'エラーが表示されます。

調査の方向性

1. キャッシュをクリアする

解決：

flutter cleanキャッシュをクリアしようとした後
依存関係を再インストールするflutter pub get
プロジェクトを再構築するflutter create .
上記の 3 つの手順を完了した後、アプリを再度起動すると、画像が正常に読み込まれることがわかります。

2. デバイスのネットワークを確認します

3. ネットワーク権限が設定されていません

android/src/main/AndroidManifest.xml中央のタグ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. 画像はクロスドメインをサポートします

プロジェクトが Chrome で実行されている場合は、画像が配置されているドメイン名がクロスドメインをサポートしているかどうかを確認します。

混乱するかもしれません。通常、画像リソースはブラウザによって直接タグ付けされるimgか、背景画像の設定cssに使用されますbackground。これらのシナリオでは、ブラウザは同一生成元ポリシーを有効にしないため、クロスドメインの問題を考慮する必要はありません。

ただし、Flutter の画像リソースはリクエストを通じてコンポーネントによって取得されるため、画像リソースを取得する方法がサーバーによってサポートされていることをxhr確認する必要があります。xhr

画像-20230910215423415

上記の例は、アプリを chrome にデプロイするもので、xhr リクエストを通じて画像リソースが取得されていることがわかります。

5. ローカルイメージ置換を使用する

例: でUserAccountsDrawerHeaderローカルイメージをアバターとして使用するには、次の手順に従います。

画像ファイルをプロジェクトディレクトリに置きます。まず、ローカル画像ファイルを Flutter プロジェクト内の適切な場所にコピーまたは移動します。通常、画像ファイルはプロジェクトのルートディレクトリのサブフォルダーに配置しますassets/images/。
pubspec.yamlファイル内の画像パスを構成する: プロジェクトのpubspec.yamlファイルを開き、そのファイル内の画像パスを構成します。次のようにセクションを追加しassets、イメージファイルパスまたはイメージディレクトリパスを追加します。

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

UserAccountsDrawerHeaderローカル画像を表示するには、Image.asset ウィジェットを使用します。

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
            ],
          ),
        ),
      ),
    );
  }
}