Next.js中如何解决src含表情符号的路径加载404问题？

我原本以为加载路径包含表情符号的图片不会有问题，比如这些路径：

/img/shops/main/text🍪.webp
/img/shops/main/text💎💎💎.jpg
/img/shops/main/text💸💸.jpg
/img/shops/main/🙂text🙂.webp
/img/shops/main/🟡(TOMAT).jpg

但在img标签的src中使用这类路径时，比如：

<img src={`/img/shops/main/🙂text🙂.webp`}/> // 或其他路径

浏览器返回404错误：

%F0%9F%99%82text%F0%9F%99%82.webp:1 GET http://localhost:3000/public/img/shops/main/%F0%9F%99%82text%F0%9F%99%82.webp 404 (Not Found)

不含表情符号的路径可正常加载，我试过encodeURIComponent、encodeURI等编码解码方法，但始终无法正常加载图片。

问题根源 #

核心问题是文件系统对表情符号的存储编码，和浏览器URL编码后的字符串不匹配，再加上服务器静态文件服务的路径解析逻辑差异，导致编码后的请求路径找不到实际存在的文件。

可行解决方案 #

1. 直接重命名文件，移除表情符号
   这是最省心的方案，把文件名里的表情替换成纯文字或易识别的符号，比如text🍪.webp改成text-cookie.webp，从根源避开编码匹配的坑。

2. 验证编码一致性并调整服务器配置
   浏览器会自动把URL中的非ASCII字符转成百分号编码，比如🙂会被编码成%F0%9F%99%82。你需要：

   • 确认服务器上实际的文件名是否和编码后的字符串一致（比如服务器上的文件是%F0%9F%99%82text%F0%9F%99%82.webp还是🙂text🙂.webp）
   • 如果服务器存的是原始表情文件名，需要确保静态文件服务能正确解码URL的百分号编码，映射到实际文件。比如在Express中，默认的express.static应该能处理，但如果有自定义路由或中间件，要检查是否干扰了解码逻辑。

3. 确认静态文件根目录映射正确
   从错误请求地址看，浏览器请求的是/public/img/...，但你的src写的是/img/...，说明服务器把/img前缀映射到了/public/img目录。要确认这个映射后的目录里，带表情的文件确实存在，且文件名的编码和请求路径匹配。

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