如何借助FCM在Web端推送通知中显示图片？

嘿，我看你已经搞定了FCM推送的基础功能，现在要在Web通知里显示图片其实很简单，主要是调整推送payload的字段，我给你一步步说清楚：

核心知识点：FCM Web通知的图片字段 #

你当前代码里的icon是用来设置状态栏小图标的，要在通知主体里展示大图，需要在notification对象里添加**image字段**，同时要注意几个关键要求：

• 图片必须用完整的HTTPS绝对URL（浏览器在安全上下文下不允许加载HTTP或相对路径的资源，你原来的/account/images/test.png这种相对路径肯定加载失败）
• 图片要保证公网可直接访问，不能是本地服务器的内部路径
• 推荐图片尺寸：192x192px以上的正方形图，或者适配通知展示的比例，避免拉伸变形

修改后的完整代码示例 #

我把你的代码补全并调整了payload部分，添加了image字段，同时把icon也改成了绝对HTTPS URL（避免小图标加载失败）：

define( 'API_ACCESS_KEY', 'Access_key' );

// 调整后的推送payload，添加image字段并替换为你的HTTPS图片地址
$data = array(
    "to" => 'token',
    "notification" => array(
        "title" => 'title',
        "body" => 'message',
        "icon" => 'https://your-domain.com/account/images/test-icon.png', // 状态栏小图标，HTTPS绝对路径
        "image" => 'https://your-domain.com/account/images/notification-banner.png', // 通知主体大图
        "click_action" => 'redirect_url',
    )
);

$data_string = json_encode($data);

$headers = array(
    'Authorization: key=' . API_ACCESS_KEY,
    'Content-Type: application/json'
);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);

$result = curl_exec($ch);
curl_close($ch);

// 可打印结果排查推送问题
echo $result;

额外注意事项 #

• 浏览器兼容性：Chrome、Firefox、Edge等现代浏览器都支持image字段，旧版浏览器可能需要在Service Worker里手动构建通知，但现在主流环境都没问题
• 图片加载失败排查：如果图片不显示，先直接在浏览器打开图片URL确认可访问；如果图片在其他域名下，需要在图片服务器配置CORS允许跨域访问
• Service Worker验证：确保你的Service Worker正确注册并监听了push事件，示例监听代码如下：

self.addEventListener('push', function(event) {
  const payload = event.data?.json() || {};
  const title = payload.notification.title || '默认标题';
  const options = {
    body: payload.notification.body,
    icon: payload.notification.icon,
    image: payload.notification.image, // 确保这里读取了image字段
    data: { url: payload.notification.click_action }
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

这样调整后，Web端的FCM推送通知就能正常展示大图啦！

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