Next.js <Image />组件加载含非英文字符文件名图片报错如何解决？

问题原因 #

这个错误是Node.js原生HTTP模块的限制与旧版本Next.js图片优化器的编码缺陷共同导致的：

• Node.js的响应头设置接口setHeader不允许直接传入非ASCII字符，否则会直接抛出ERR_INVALID_CHAR类型错误
• 12.1.6之前版本的Next.js内置图片优化器，在设置Content-Disposition响应头时会直接使用原始文件名，没有对非英文字符做URL编码处理，当文件名包含希伯来语、中文等非ASCII字符时就会触发上述报错，返回500状态码。

解决方案 #

你可以根据自己的项目场景任选以下一种方案处理：

• 手动对图片路径做URL编码
  这是适配性最强的方案，不需要修改项目依赖或配置，直接用encodeURI方法包裹图片src参数即可：

import Image from 'next/image';
<Image alt="shark image" src={encodeURI("/images/כריש.png")} width={1000} height={1000} />

• 升级Next.js到12.1.6及以上版本
  该问题属于Next.js已知缺陷，官方在12.1.6版本中已经修复了图片优化器的响应头编码逻辑，升级后非英文字符文件名的图片可以正常加载，不需要额外处理。
• 自定义图片加载器绕过内置优化器
  如果不方便升级版本，也可以自定义图片加载器，跳过Next.js内置的图片优化逻辑，直接返回编码后的图片路径：

const customLoader = ({ src }) => {
  return encodeURI(src)
}

// 组件中使用
<Image loader={customLoader} alt="shark image" src="/images/כריש.png" width={1000} height={1000} />

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