Flutterで「Unhandled Exception: Exception: Failed to load network image」エラーが表示されたときの解決方法

投稿日 2024年09月02日更新日 2024年09月07日

Flutter

エラー解決

この記事の目次

5. プレースホルダーとエラーウィジェットの使用

6. キャッシュの使用

まとめ

生成AIによる職務経歴書・履歴書作成サービスRESUMY.AI 職種別テンプレートに沿ってAIが最適な経歴書を自動生成

生成AIで職務歴書作成を瞬間作成！ RESUMY.AI

Flutterアプリの開発中に「Unhandled Exception: Exception: Failed to load network image」というエラーに遭遇したことはありませんか？このエラーは、ネットワーク上の画像の読み込みに失敗した際に発生します。本記事では、このエラーの原因と解決方法について詳しく解説します。

エラーの原因

このエラーが発生する主な原因は以下の通りです：

1. インターネット接続の問題

2. 画像URLの不正確さ

3. HTTPSの使用

4. パーミッションの設定不足

解決方法

1. インターネット接続の確認

まず、デバイスがインターネットに接続されていることを確認しましょう。Wi-FiやモバイルデータがONになっているか、また安定した接続があるかを確認してください。

2. 画像URLの確認

画像URLが正しいか、また有効であるかを確認します。ブラウザで直接URLを開いて、画像が表示されるかテストしてみましょう。

Image.network('https://example.com/image.jpg')

URLが正しいことを確認し、必要に応じて修正してください。

3. HTTPSの使用

Android 9（API レベル 28）以降では、デフォルトでHTTP接続が無効になっています。HTTPSを使用しているか確認し、可能な限りHTTPSに切り替えましょう。

HTTPを使用する必要がある場合は、`android/app/src/main/AndroidManifest.xml`ファイルに以下の設定を追加します：

<application
    android:usesCleartextTraffic="true"
    ...>
</application>

4. パーミッションの設定

AndroidとiOSの両方で、インターネットアクセスのパーミッションが正しく設定されているか確認します。

Android（`android/app/src/main/AndroidManifest.xml`）：

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

iOS（`ios/Runner/Info.plist`）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

5. プレースホルダーとエラーウィジェットの使用

画像の読み込み中やエラー時の表示を改善するために、`Image.network`ウィジェットのオプションを活用しましょう：

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return Text('画像の読み込みに失敗しました');
  },
)

6. キャッシュの使用

画像の読み込みパフォーマンスを向上させるために、`cached_network_image`パッケージの使用を検討してください：

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)