Firebase推送通知无图片显示问题排查与代码优化求助

你的代码核心问题是没有处理推送消息中的图片资源，也未在通知配置中添加图片显示的相关参数。以下是具体修改步骤：

1. 明确Firebase推送的图片传递方式 #

Firebase推送的图片通常有两种传递形式：

• 官方字段：包含在message.notification.image（FCM标准通知字段）
• 自定义字段：放在message.data['image']（业务自定义的参数）

先确认你的推送消息用哪种方式传图片，再针对性处理。

2. 修改display方法实现图片显示 #

首先添加http依赖（用于下载网络图片到本地），然后更新display方法：

import 'package:http/http.dart' as http;
import 'dart:io';
import 'package:path_provider/path_provider.dart';

static void display(RemoteMessage message) async {
  AndroidNotificationChannel channel = AndroidNotificationChannel(
      'high_importance_channel',
      'High Importance Notifications',
      importance: Importance.high,
      playSound: true);

  try {
    final id = DateTime.now().millisecondsSinceEpoch ~/ 1000;
    String imageUrl = '';
    // 优先取官方通知的image字段，没有则取自定义data中的image
    if (message.notification?.image != null) {
      imageUrl = message.notification!.image!;
    } else if (message.data['image'] != null) {
      imageUrl = message.data['image']!;
    }

    AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
      channel.id,
      channel.name,
      color: Colors.blue,
      playSound: true,
      icon: '@mipmap/ic_launcher',
    );

    // 有图片链接时，下载并配置通知大图
    if (imageUrl.isNotEmpty) {
      final String localPath = await _downloadAndSaveImage(imageUrl);
      androidDetails = androidDetails.copyWith(
        bigPicture: FilePathAndroidBitmap(localPath), // 通知展开时的大图
        largeIcon: FilePathAndroidBitmap(localPath), // 通知小图标旁的缩略图（可选）
      );
    }

    final NotificationDetails notificationDetails = NotificationDetails(
      android: androidDetails,
    );

    await _notificationsPlugin.show(
      id,
      message.notification?.title,
      message.notification?.body,
      notificationDetails,
      payload: message.data["route"],
    );
  } on Exception catch (e) {
    debugPrint(e.toString());
  }
}

// 辅助方法：下载网络图片到本地临时目录
static Future<String> _downloadAndSaveImage(String url) async {
  final response = await http.get(Uri.parse(url));
  final directory = await getTemporaryDirectory();
  final filePath = '${directory.path}/notification_image.jpg';
  final file = File(filePath);
  await file.writeAsBytes(response.bodyBytes);
  return filePath;
}

3. 必要的权限配置 #

• Android端：在AndroidManifest.xml添加网络权限

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

• iOS端：如果使用HTTP图片链接，需要在Info.plist中添加ATS例外配置；HTTPS链接则无需额外操作

4. 后台/终止状态的图片显示 #

若要在App后台或终止状态下也显示图片，需确保推送的是数据消息（或通知消息同时携带data字段），并且在原生层面（如Android的FirebaseMessagingService）复用上述图片处理逻辑，否则系统默认通知不会自动加载自定义图片。

内容的提问来源于stack exchange，提问作者Rajesh