中文文件名导致生产环境部分图片无法加载

图片在测试环境能全部正常加载，但在生产环境上，部分图片能正常加载，部分图片无法加载。

问题描述

前段时间要往公司项目里加几张图片，由于给那几张图片取英文名有些麻烦，再加上我看了以前的代码里，有很多图片是直接用中文命名的，于是就偷个懒也用中文文件名了。

后来经测试，图片在开发环境 (webpack, localhost) 和测试环境 (nginx) 都能正常加载出来，我也就放心地打包上生产了。

然而，在几周后的又一次上线时，问题却暴露出来了：部分图片无法加载！

解决过程倒是没什么好说的，我很快发现了原因是那部分中文文件名的图片的文件名变成乱码了，于是重命名为英文文件名并重新打包，就解决了。

可是虽然问题解决了，但这里还存在几个疑点：

首先，webpack打包有这么一个机制：超过10kb的文件会被打包成单独的文件，而小于10kb的文件会被打包成base64编码的字符串，直接写在代码里。

这就解释了为什么有些图片能正常加载，有些图片的文件名却变成乱码导致无法加载：

但是，为什么同一张图片，之前用中文文件名没问题，这次用中文文件名就变成乱码了呢？

下面只是我的一个猜测：

测试环境和上次生产上线时，前端项目是我自己打包的，而这次是由另一个同事打包的。或许是由于我们电脑的系统不同，或是使用的压缩软件不同，导致了文件名的编码方式不同，所以之前的都没问题，但这次上传到生产服务器后，在服务器上解压出来就变成乱码了。