复制Next.js 15文档的opengraph-image代码段出现类型错误

你遇到的情况确实是官方文档的疏漏——文档里的示例代码直接将ArrayBuffer类型的图片数据传给了<img>的src属性，但根据TypeScript的类型定义，ImgHTMLAttributes.src只接受string类型，所以会抛出Type 'ArrayBuffer' is not assignable to type 'string'.ts(2322)的错误。

问题根源 #

浏览器的<img>元素的src属性仅支持字符串格式的资源地址，包括：

• 绝对/相对URL
• Data URL（base64编码的字符串）

而文档示例中直接使用fs/promises.readFile返回的ArrayBuffer，既不符合src的类型要求，也无法被浏览器正确解析。

修复方案 #

需要将ArrayBuffer转换为base64格式的Data URL，具体步骤如下：

1. 将ArrayBuffer转换为Uint8Array
2. 把Uint8Array转换为ASCII字符串后用btoa编码成base64
3. 拼接成符合Data URL规范的字符串格式

修正后的代码示例：

import { readFile } from 'fs/promises';
import { join } from 'path';

export default async function OpenGraphImage() {
  // 读取本地图片文件
  const imageBuffer = await readFile(join(process.cwd(), 'public', 'your-image.png'));
  
  // 转换为base64 Data URL
  const uint8Array = new Uint8Array(imageBuffer);
  const base64String = btoa(String.fromCharCode(...uint8Array));
  const imageSrc = `data:image/png;base64,${base64String}`;

  return (
    <div style={{ width: 1200, height: 630, backgroundColor: '#ffffff' }}>
      <img src={imageSrc} alt="Custom OG Image" width={300} height={300} />
      {/* 按需添加其他OG图片内容 */}
    </div>
  );
}

验证 #

修改后重新运行npm run build或检查opengraph-image.tsx文件，TypeScript错误会消失，同时浏览器也能正确渲染生成的OpenGraph图片。

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