解决 Nginx 部署后前端图片乱码的问题

在前端项目部署到 Nginx 之后，可能会遇到 图片文件名乱码 的问题，导致前端无法正确加载图片。这篇文章记录一下遇到该问题的具体情况以及最终的解决方案。

问题描述

当我将前端项目上传到服务器并配置 Nginx 之后，发现部分图片无法正常显示。打开服务器的 image 目录后，看到一堆乱码文件名，比如：

ls image/
#U4E2D#U6587.png  #U56FE#U7247.jpg

尝试访问这些图片的 URL，Nginx 返回 404，说明文件名解析有问题。

问题分析

从文件名格式来看，它们被编码成了 Unicode 转义格式（#UXXXX），即 #U4E2D#U6587 代表的是 中文。这可能是由于 文件在 Windows 或 macOS 生成时使用了不同的编码格式，但在 Linux 服务器上解析失败。

此外，执行 ls 时如果文件名显示 ??????.png，说明服务器的 系统语言环境 可能不支持 Unicode，需要手动设置（使用下面两行代码即可）。

解决方案

1. 设置服务器语言环境

首先，确保服务器的语言环境支持 UTF-8，防止 ls 命令解析乱码：

export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

如果 ls 之后文件名仍然是 ??????，可以将这两行添加到 ~/.bashrc 或 ~/.profile，然后执行 source ~/.bashrc 使其生效。

2. 批量转换 Unicode 乱码文件名

进入 image 目录，执行下面的命令，把 Unicode 形式的文件名转换回正常字符：

for file in *; do
  newname=$(echo "$file" | perl -pe 's/#U([0-9A-Fa-f]{4})/chr(hex($1))/eg');
  mv "$file" "$newname"
done

命令解析：

• for file in *; do 遍历 image 目录下的所有文件。
• perl -pe 's/#U([0-9A-Fa-f]{4})/chr(hex($1))/eg' 识别 #UXXXX 格式，并转换为对应的 UTF-8 中文字符。
• mv "$file" "$newname" 把转换后的新文件名应用到旧文件。

执行后，再次 ls，发现文件名已经正常显示，如：

ls image/
中文.png  图片.jpg

3. 重启 Nginx 并测试

文件名修正后，重启 Nginx，让新的文件名生效：

systemctl restart nginx

然后访问前端页面，发现图片已经能正常加载！

总结

• 文件名乱码可能是 Unicode 转义格式导致的，需要用 Perl 进行转换。
• Linux 服务器可能默认不支持 Unicode，需手动设置 LANG 和 LC_ALL。
• 修正文件名后，记得重启 Nginx 让更改生效。

希望这次的问题解决过程可以让大家对 Linux 编码格式和文件系统有更深的理解。如果以后再遇到类似问题，可以更快地排查并处理！

版权属于：不冷

本文链接：https://www.buleng.xyz/archives/237/

转载时须注明出处及本声明