React - 静态图像有时导入图像路径，有时为base64答案

【问题标题】：React - static images sometimes importing image path, sometimes as base64React - 静态图像有时导入图像路径，有时为base64
【发布时间】：2021-09-23 20:27:16
【问题描述】：

我正在尝试导入图像路径并将它们存储到 redux 存储中。

我注意到在导入图像时，它似乎随机导入了该图像的路径或 base64 数据。

有人可以解释导致这种行为的原因，以及如何使其仅导入图像路径（如 img_1 和 img_2 ）

【问题讨论】：

标签： reactjs image import path base64

【解决方案1】：

图像 3 和 4 总是 base64 吗？如果是这样，它们很可能是 base64 编码文件，但命名为 task-manager-3.png 和 task-manager-4.png。至少这是我的第一个想法。手头的信息很难说。

如果使用 linux，请尝试 file task-manager-3.png 并将其输出与 file task-manager-1.png 进行比较。如果第一个报告如下：

myfile.png: ASCII text, with very long lines

它更有可能是经过 base64 编码并使用 PNG 扩展名保存的图像。 PNG 文件应返回如下内容：

filename.png: PNG image data, 1731 x 458, 8-bit/color RGBA, non-interlaced

要将 base64 编码文件解码回实际的 PNG，您可以使用在线解码器，例如 https://www.base64decode.net/base64-image-decoder

【讨论】：

感谢您的回答，以这种方式比较文件也很酷。看起来文件是相同的，因为输出是：PNG 图像数据，703 x 380，8 位颜色图，非隔行扫描和 PNG 图像数据，388 x 302，8 位颜色图，非隔行扫描。我将尝试使用解码工具，看看它的表现如何

【解决方案2】：

你应该检查文件大小，如果文件大小大于8192字节，那么它将作为路径导入，否则webpack将对其进行编码。

参考资料：

【讨论】：