为什么我的图像路径不起作用？答案

【问题标题】：Why is my path to my image not working in react?为什么我的图像路径不起作用？
【发布时间】：2023-03-24 15:53:01
【问题描述】：

这是我的文件夹布局

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，但结果还是一样。

如果我的代码正确，还有什么其他可能的原因？

【问题讨论】：

将require 更改为import 会发生什么？如果这不起作用，请在文件顶部添加 import alligator from './images/alligators/Alligator 1.svg' 并将代码更改为 src={alligator}。
@squillman 谢谢，手册import alligator from 'path' 有效，然后将其更改为src={alligator}，但require->import 没有做任何事情。我不确定为什么手动导入有效，但不是图像，因为它是相同的确切路径
尝试它为我工作。而且不喜欢把空格改成文件名。
@romanown 不起作用。当我在我的 html/css 文件中但没有反应时它可以工作，不知道为什么。并且是相同的路径，给出或采取轻微的语法差异
这是因为您已经展示了目录结构并在设计时使用它。并且图像应该放在编译后得到的结构中。生成的捆绑包在哪里。该链接位于 html 文件中。但是您可能按照接受的答案进行操作仍然更方便。

标签： javascript html reactjs image path

【解决方案1】：

更新您的代码以导入图像，然后像这样在 src 中使用它：

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

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

【讨论】：

【解决方案2】：

在 react.js 中，你可以将你的图片放在 public 文件夹（与 src 相同的目录）中，然后使用它的默认路径提供它，e.i :src="/image.svg"

【讨论】：

是的，但我想保持文件井井有条，而不是在 SRC 文件夹中堆放一堆。