我正在为我的应用程序使用 React。我有一个
div当我将它作为
srcmyapp/src/bgimage.pngimagesmyapp/images/bgimage.png您尝试导入位于项目 src/ 目录之外的 ../images/bgimage.png。”
谁能告诉我在reactJS中包含图像资源的正确方法？
public：应用程序编译时未使用的任何内容
src：编译应用程序时使用的任何内容
例如，如果您在组件内使用图像，则它应该位于 src 文件夹中，但如果您在应用程序外部有图像（即 favicon），则它应该位于公共文件夹中。
我想补充一点，在“src”文件夹中创建一个“assets”文件夹是一个很好的做法。
/src，请使用
create-react-app如果您正在使用
create-react-app/src
- 脚本和样式表被缩小并捆绑在一起，以避免额外的网络请求。
- 丢失文件会给您的用户带来编译错误而不是 404 错误。
- 结果文件名包含内容哈希，因此您无需担心浏览器缓存其旧版本。
此外，如果您无论如何都使用 webpack 的资源捆绑，那么您在
/src您可以在 src 内创建子目录。为了更快地重建，webpack 仅处理 src 内的文件。您需要将任何 JS 和 CSS 文件放入 src 中，否则 webpack 将看不到它们。
看这个链接
不，
public 文件夹用于存放静态文件，例如index.html 和...
我认为你应该在 src 文件夹中创建一个“assets”文件夹 并以这种方式访问它们。
根据create-react-app文档，关于public文件夹的使用：
通常我们建议从 JavaScript 导入样式表、图像和字体。公用文件夹对于许多不太常见的情况来说是有用的解决方法：
- 您需要在构建输出中具有特定名称的文件，例如manifest.webmanifest。
- 您有数千张图像，需要动态引用它们的路径。
- 您想在捆绑代码之外包含一个小脚本，例如pace.js。
- 某些库可能与 webpack 不兼容，您别无选择，只能将其包含为标签。
继续其他答案，我想进一步补充一点，您应该在“src”文件夹下创建一个“assets”文件夹，然后在“assets”文件夹下创建“images”文件夹。您可以将图像存储在“图像”文件夹中，然后从那里访问它们。
根据我的理解，我会采用更简单的方法。如果您使用公共文件夹中的资源，则构建后公共文件夹中的内容将保持不变。因此，如果您部署应用程序，则在加载应用程序时也会加载公共文件夹中的内容。假设您的构建大小为 5 MB（4 MB 资源和 1 MB src），则将首先下载 4 MB，然后下载 src 包含的内容。即使您使用惰性和悬念，您的应用程序在部署过程中也会很慢。
publicsrc/assetspublicindex.htmlsrc/assetsjs/ts/jsx/tsx/...etc... filessrcpublic引用
<!-- index.html -->
<head>
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
src/assets