我是在 reactJS 中将图像资产存储在 public 还是 src 中?

IT技术 reactjs
2021-04-10 16:54:31

我正在为我的应用程序使用 react。我有一个div我想要一个背景图片。但我不能让它显示出来。

当我将它包含在src文件夹中时,因为myapp/src/bgimage.png它运行良好,但我听说我应该将它包含images在以根级别命名的文件夹中,所以它是myapp/images/bgimage.png,但是这对我不起作用并给了我:

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

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

6个回答

public:您的应用在编译时未使用的任何内容

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

因此,例如,如果您在组件内使用图像,则它应该位于 src 文件夹中,但如果您在应用程序外部(即 favicon)中有图像,则它应该是公共的。

“您的应用程序未使用”是什么意思?
2021-05-30 16:54:31
@Fadhil 猜测这意味着在任何 React 组件或样式表中都没有实际使用
2021-06-09 16:54:31
@Fadhil 不需要编译应用程序
2021-06-16 16:54:31

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

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


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

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

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

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

看这个链接

我知道远程存储问题是如何在资产中的公共或 src 之一中做到这一点
2021-05-31 16:54:31
我认为将 20,000 存储到项目中并不是一个好主意。使用远程存储下载并使用
2021-06-04 16:54:31
如果 ReactJc 项目包含 20.000 张图像怎么办?用户也可以下载图片!
2021-06-08 16:54:31

不,

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

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

在这篇文章中,我提到

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

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