我将Image资产存储在reactJS中的public或src中吗？

Question

我正在使用反应我的申请.我有一个div我想要的背景图片.但我不能让它显示出来.

当我把它包含在src文件夹中因为myapp/src/bgimage.png它完美地工作但是我听说我应该将它包含在一个以images根级别命名的文件夹中,所以它是myapp/images/bgimage.png,但是这对我不起作用并且给了我:

您试图导入../images/bgimage.png,它位于项目src /目录之外.

谁能告诉我在reactJS中包含图像资产的正确方法？

Answer 1

public:应用程序编译时未使用的任何内容

src:编译应用程序时使用的任何内容

因此,例如,如果您在组件内使用图像,它应该在src文件夹中,但如果您在应用程序外部有图像(即图标),则应该公开.

Answer 2

我想补充一点，在“src”文件夹中创建一个“assets”文件夹是一个很好的做法。

Answer 3

根据create-react-app文档，关于public文件夹的使用：

通常我们建议从 JavaScript 导入样式表、图像和字体。公用文件夹可作为解决许多不太常见情况的方法：

• 您需要在构建输出中具有特定名称的文件，例如manifest.webmanifest。
• 您有数千张图像，需要动态引用它们的路径。
• 您希望在捆绑代码之外包含一个小脚本，例如pace.js。
• 有些库可能与 webpack 不兼容，您别无选择，只能将其包含为标签。

Answer 4

不，

公共文件夹用于静态文件，如 index.html 和 ...

我认为，您应该在 src 文件夹中创建一个“assets”文件夹并以这种方式访问​​它们。

Answer 5

使用/src如果您正在使用create-react-app

如果您正在使用create-react-app，您需要使用/src以获得以下好处。

1. 脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。
2. 缺少文件会导致编译错误，而不是用户的 404 错误。
3. 结果文件名包括内容哈希，因此您无需担心浏览器缓存其旧版本。

此外，如果您无论如何都使用webpack 的资产捆绑，那么您的文件/src将被重建。

您可以在 src 内创建子目录。为了更快地重建，webpack 只处理 src 中的文件。您需要将任何 JS 和 CSS 文件放在 src 中，否则 webpack 将看不到它们。

看这个链接

Answer 6

继续其他答案，我想进一步补充一点，您应该在“src”文件夹下创建一个“assets”文件夹，然后在“assets”文件夹下创建“images”文件夹。您可以将图像存储在“图像”文件夹中，然后从那里访问它们。

Answer 7

在这篇文章中，我提到

保留一个包含顶级 CSS、图像和字体文件的资产文件夹。

在 React 最佳实践中，我们在 src 中保留了一个 assets 文件夹，其中可能包含顶级 CSS、图像和字体文件。