如何为Ionic 3+Firebase开发的安卓推送通知添加图片

要给你的Ionic 3应用的Firebase推送通知添加图片很简单，只需要在FCM的请求payload里补充image字段就行。我帮你修改了PHP代码，具体看下面的改动：

修改后的PHP代码 #

public function pushNotification($title, $body, $image) { 
    //FCM API end-point 
    $url = 'https://fcm.googleapis.com/fcm/send'; 

    //api_key available in Firebase Console -> Project Settings -> CLOUD MESSAGING -> Server key 
    $server_key = 'xxxx'; 

    $target = []; 
    $targets = $this->db->get('device_ids')->result(); 
    foreach($targets as $val) { 
        array_push($target, $val->device_id); 
    } 

    $fields = array(); 
    $fields['notification'] = array( 
        'title' => $title, 
        'body' => $body,
        'image' => $image // 新增：添加图片字段
    ); 

    if(is_array($target)){ 
        $fields['registration_ids'] = $target; 
    }else{ 
        $fields['to'] = 'news'; 
    } 

    //header with content_type api key 
    $headers = array( 
        'Content-Type:application/json', 
        'Authorization:key='.$server_key 
    ); 

    //CURL request to route notification to FCM connection server (provided by Google) 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_POST, true); 
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields)); 

    $result = curl_exec($ch); 
    if ($result === FALSE) { 
        die('Oops! FCM Send Error: ' . curl_error($ch)); 
    } 
    curl_close($ch); 
    print_r(json_encode($fields)); 
}

关键说明： #

• 我在$fields['notification']数组里新增了'image' => $image，这个字段接收的是可公开访问的HTTPS图片URL（FCM推荐使用HTTPS，避免部分设备无法加载）
• 确保你调用这个函数时传入的$image参数是有效的图片地址，比如https://your-domain.com/path/to/notification-image.jpg
• 另外要确认你的Ionic 3项目使用的FCM插件支持显示通知图片：如果用的是@ionic-native/fcm或者cordova-plugin-fcm-with-dependecy-updated这类主流插件，它们已经支持解析image字段并显示在通知中

如果遇到图片不显示的情况，可以检查：

• 图片URL是否能在设备浏览器中正常打开
• 图片尺寸是否符合通知规范（一般建议用192x192或更大的正方形图片）
• 插件版本是否过旧，尝试更新到最新兼容版本

内容的提问来源于stack exchange，提问作者Januka Chanaka Sudusinghe