javascript - 为什么我的图像路径在 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 标签中解析它。