Next.js 14 ImageResponse偶现CERT_HAS_EXPIRED及图片导入问题求助

错误1：证书过期导致fetch失败 #

问题分析 #

使用fetchAsset通过fetch请求本地图片时，Edge Runtime环境下触发SSL证书过期错误（CERT_HAS_EXPIRED）。原因是自部署环境的HTTPS证书过期，或者Edge环境不认可自签证书，导致fetch请求失败。

解决方案 #

• 直接读取文件系统（推荐）：替换网络fetch方式，直接读取本地图片文件转base64，避免网络请求：

import { readFileSync } from 'fs';
import { join } from 'path';

export function getAssetAsBase64(path: string): string {
  const buffer = readFileSync(join(process.cwd(), path));
  return `data:image/png;base64,${buffer.toString('base64')}`;
}

// 使用示例
const logo = getAssetAsBase64('./assets/logo.png');

• 更新SSL证书：检查部署环境的HTTPS证书，替换为有效证书。
• 开发环境临时绕过：设置环境变量NODE_TLS_REJECT_UNAUTHORIZED=0（仅开发场景使用，生产环境禁止）。

错误2：图片源必须是绝对URL #

问题分析 #

@vercel/og（ImageResponse依赖库）要求<img>的src必须是绝对URL，而Next.js导入本地图片返回的是相对路径（/_next/static/media/...），Edge Runtime无法解析该路径。

解决方案 #

• 使用base64嵌入图片：用上述getAssetAsBase64方法直接生成base64字符串，作为img的src。
• 拼接绝对URL：通过环境变量配置应用的完整域名，拼接图片路径：

const baseUrl = process.env.NEXT_PUBLIC_APP_URL; // 例如https://your-domain.com
const backgroundSrc = `${baseUrl}${background.src}`;

• 修复fetchAsset逻辑：解决证书问题后，使用fetchAsset返回的base64作为图片源。

错误3：Next组件触发Symbol转换错误 #

问题分析 #

Next.js的<Image>组件是为客户端/SSR渲染设计的，不兼容ImageResponse的Edge Runtime渲染上下文，会触发Symbol类型转换错误。

解决方案 #

• 改用原生标签：在ImageResponse的JSX中仅使用原生HTML元素，配合base64或绝对URL的图片源。

关于错误自行消失的说明 #

错误24小时后自行消失，大概率是以下情况：

• 部署环境的SSL证书自动更新，解决了证书过期问题。
• Edge Runtime的缓存失效，清除了之前的错误状态。
• 临时网络异常恢复。

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