Javascript 如何在ReactJS中包含一个“”？

我已经尝试了许多基于不同答案的方法，但我似乎无法实现这一点

我的文件结构如下：

-client
--components
---thecomponent.js //the file
--img
---small.png //the image

在component.js中

// all these don't work
<button><img src={require("../img/small.png")}/></button>
<button><img src={"../img/small.png"}/></button>
<button><img src="../img/small.png"/></button>

非常感谢您的帮助

编辑：我已经尝试了提供的每个建议。看起来我的方向是正确的，但使用require时仍然会出现相同的错误。它说：

找不到模块“/public/img/small.png” 在require modules runtime.js？hash=0969a31…：133

有什么想法吗

EDIT2：我发现了问题所在。事实上，我使用的是meteor react，而不是纯react，因此我提出了错误的问题。paqash和Rishabh的答案都是正确的，但在meteor中，公众/词语在引用时会被删除，如他们的：

名为public/的顶级目录中的所有文件都按原样提供给客户端。当引用这些资产时，不要在URL中包含public/或public/时，请将URL编写为它们都位于顶层。例如，将public/bg.png作为参考。这是favicon.ico、robots.txt和类似文件的最佳位置

var small=require'../img/small.png'

这适用于我

var small=require'../img/small.png'

---

这适用于我

您应该使用绝对路径而不是通过相对路径从http服务器加载图像。您还可以使用CDN来承载映像

添加一个公共目录，然后像

---

您应该使用绝对路径而不是通过相对路径从http服务器加载图像。您还可以使用CDN来承载映像

添加一个公共目录，然后像

---

使用这些方法时有什么错误？找不到图像？此外，使用绝对路径通常更好，因为它更容易看到导入的位置，这意味着当您更改其在项目层次结构中的位置时，所有组件导入都不会中断。否则，您可能会遇到这样的垃圾，您需要一个图像加载器，以确保在导入图像时，它返回正确的url；i、 e.使用这些方法时有什么错误？找不到图像？此外，使用绝对路径通常更好，因为它更容易看到导入的位置，这意味着当您更改其在项目层次结构中的位置时，所有组件导入都不会中断。否则，您可能会遇到这样的垃圾，您需要一个图像加载器，以确保在导入图像时，它返回正确的url；i、 e.使用绝对路径与相对路径对缓存绝对没有影响。在考虑缓存之前，将相对路径解析为绝对路径。同意。相应地更新答案。使用绝对路径与相对路径对缓存绝对没有影响。在考虑缓存之前，将相对路径解析为绝对路径。同意。相应地更新答案。

-client
--components
---thecomponent.js //the file
-public
--img
---small.png
-index.html