React项目中应该把图片文件放在哪里？

Question

我通常在src文件夹下创建images文件夹，因此可以通过require在我的组件中访问这些图片 require("images/sample.jpg")。

我的朋友正在学习React，他遇到了加载图片的困难，于是他在public文件夹下创建了images文件夹，如下图所示。这样一来，他就可以在不使用require()的情况下访问图片，只需输入images/sample.jpg即可。我之前认为在React中必须使用require()才能加载图片。

在public文件夹下放置images文件夹没有问题吗？那我们为什么需要使用require()呢？

- Jay P.

Answer 1

将图片添加到public文件夹和src文件夹中都是可以接受的方法，然而，将图像导入组件具有优点，即您的资产将由构建系统处理，并将获得哈希值，从而改善缓存/性能。您还将获得附加的好处，即如果移动/重命名/删除文件，则会引发错误。

我应该注意到，我相信哈希功能在create-react-app中已经默认提供，但在Webpack中需要手动配置。

- Keith Brewster

---

使用公共文件夹在生产环境中不会有问题吗？问题是缺少性能效率？ - Jay P.

我认为将图像导入组件并将公共文件夹委托给诸如收藏夹和其他静态内容等内容是相当普遍的做法。但除此之外，在使用公共文件夹时不应该有任何问题。 - Keith Brewster

嗨 @KeithBrewster。我仍然不明白应该在哪里托管我的图像。我应该将它们放在公共文件夹内的一个图像文件夹中吗？谢谢您提前的帮助。 - Pedro Relvas

嗨@PedroRelvas，对于我来说，我在我的源文件夹中创建了一个名为“images”的文件夹，并将所有图片放在那里。然后我可以使用以下代码导入它们：import imageName from '../images/imageName.png' - Eyong Kevin Enowanyo

如果图像既用于应用程序，又允许最终用户从公共文件夹下载所有图像，那么是否有一些解决方法可以避免重复设置图像？ - Erik

如果您可以编辑答案，最佳实践是什么？将图像保存在公共目录下还是在/src/assets/images目录下？ - Sunil Garg

Answer 2

我把它放在"public"中，因为它是用来存放静态文件的，而"src"或"components"也是可行的解决方案。

我认为将其放在src或component中，必须导入到组件中并使用，这样做可能会增加构建大小，因为它会被Webpack处理。

- JsohnData