为什么我的图像路径在 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&nbsp;alligator&nbsp;from&nbsp;'./images/alligators/Alligator&nbsp;1.svg'; ... <img&nbsp;src={alligator}&nbsp;alt="alligator&nbsp;illustrator"&nbsp;/>通过导入，您的文件将被存储到其中alligator，然后可供 React 使用。然后 React 在你的 img 标签中解析它。

Answer 2

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