为什么我的图像路径在 React 中不起作用？

Question

这是我的文件夹布局src                                   (folder)   images                             (folder)         alligators                   (folder)                  Alligator 1.svg     (svg file)   main.js                            (javascript file)这是我在 main.js 文件中的代码行：    <img src={require("./images/alligators/Alligator 1.svg")} alt="alligator illustrator" />我没有收到任何错误，我只是显示了我的替代文本，但没有显示我的图像。我的道路似乎有什么问题？我也只是尝试了没有“require”的 {} curly，但结果是相同的。我尝试将 Alligator 1 重命名为不带空格，但结果还是一样。如果我的代码是正确的，那么还有哪些其他可能的原因会发生这种情况？

Answer 1

更新代码以导入图像，然后在 src 中使用它，如下所示：

import alligator from './images/alligators/Alligator 1.svg';
...
<img src={alligator} alt="alligator illustrator" />

通过导入，您的文件将被存储到其中alligator，然后可供 React 使用。然后 React 在你的 img 标签中解析它。

Answer 2

在react.js中，您可以将图像放入公共文件夹（与src相同的目录）中，然后使用默认路径 ei 提供它：src="/image.svg"