当图像名称包含空格时如何在 React 中渲染图像？答案

【问题标题】：How to render images in React when the image names contain white spaces?当图像名称包含空格时如何在 React 中渲染图像？
【发布时间】：2020-10-27 19:14:21
【问题描述】：

我正在使用 React 来引用一些名称中包含空格的（本地）图像。例如

<img src={`/images/${user.name}.jpg`} />

但是，React 无法加载/渲染图像。该图像位于/public 文件夹中，我仔细检查了文件名/路径。我也尝试使用encodeURIComponent() 作为路径，但这也不起作用。但是，当我从图像名称中删除空格时，React 能够正确渲染图像。

【问题讨论】：

标签： javascript html reactjs image

【解决方案1】：

请使用encodeURIComponent对文件名进行编码

<img src={`/images/${encodeURIComponent(user.name)}.jpg`} />

【讨论】：

我在我的问题中提到我已经尝试过encodeURIComponent——这不起作用。
哦，对不起。那么具有非空格文件名的图像可以正常工作吗？