我正在为我的应用程序使用react。我有一个div，我想有一个背景图像。但我不能让它显示。当我把它作为myapp/src/bgimage.png包含在src文件夹中时，它工作得很好，但我听说我应该把它包含在根级别的名为images的文件夹中，所以它是myapp/images/bgimage.png，但这对我不起作用，并给我：您试图导入../images/bgimage.png，它福尔斯项目src/目录中。'有谁能告诉我在reactJS中包含图片资产的正确方法吗？
div
myapp/src/bgimage.png
src
images
myapp/images/bgimage.png
5ssjco0h1#
public：应用编译时未使用的任何内容src：编译应用程序时使用的任何内容例如，如果你在一个组件中使用一个图像，它应该在src文件夹中，但如果你在应用程序之外使用一个图像（即favicon），它应该是公共的。
4uqofj5v2#
我想补充一点，在“src”文件夹中创建一个“assets”文件夹是一个很好的做法。
edqdpe6u3#
create-react-app
/src
如果您使用的是create-react-app，则需要为following benefits使用/src。1.脚本和样式表被缩小并捆绑在一起，以避免额外的网络请求。1.对于用户，缺少文件会导致编译错误，而不是404错误。1.结果文件名包含内容哈希，因此您不必担心浏览器缓存旧版本。另外，如果您正在使用webpack的资产捆绑，那么您在/src中的文件将被重建。您可以在src中创建子目录。为了更快地重建，webpack只处理src中的文件。您需要将任何JS和CSS文件放在src中，否则webpack将无法看到它们。看到这个link
pieyvz9o4#
没有，public文件夹用于静态文件，如index.html和...我认为你应该在src文件夹中创建一个“assets”文件夹，并以这种方式访问它们。
8iwquhpp5#
在article中，我提到保留一个包含顶级CSS、图像和字体文件的assets文件夹。在react最佳实践中，我们在src中保留了一个assets文件夹，其中可能包含顶级CSS，图像和字体文件。
ma8fv8wu6#
根据create-react-app文档，关于公共文件夹的使用：通常，我们建议从JavaScript导入样式表、图像和字体。public文件夹可用于解决一些不太常见的情况：
esyap4oy7#
在继续与其他答案，我想进一步补充说，你应该创建一个'资产'文件夹下的'src'文件夹，然后创建'图像'文件夹下的'资产'文件夹。您可以将您的图像存储在'图像'文件夹，然后从那里访问它们。
a8jjtwal8#
根据我的理解，我会用更简单的方法。如果您使用公共文件夹中的资产，则构建后公共文件夹中的内容将保持不变。因此，如果您部署应用程序，在加载应用程序时，也将加载公用文件夹中的内容。假设您的内部版本为5 MB（4 MB的资产和1 MB的src）4 MB将首先下载，然后跟随src包含。即使你使用懒惰和悬念，你的应用在部署过程中也会很慢。
fumotvh39#
我想分享的是，您可以创建图像/资产文件夹中的src文件夹，只有这样你就可以访问图像更容易
9条答案
按热度按时间5ssjco0h1#
public：应用编译时未使用的任何内容
src：编译应用程序时使用的任何内容
例如，如果你在一个组件中使用一个图像，它应该在src文件夹中，但如果你在应用程序之外使用一个图像（即favicon），它应该是公共的。
4uqofj5v2#
我想补充一点，在“src”文件夹中创建一个“assets”文件夹是一个很好的做法。
edqdpe6u3#
如果使用
create-react-app，请使用/src如果您使用的是
create-react-app，则需要为following benefits使用/src。1.脚本和样式表被缩小并捆绑在一起，以避免额外的网络请求。
1.对于用户，缺少文件会导致编译错误，而不是404错误。
1.结果文件名包含内容哈希，因此您不必担心浏览器缓存旧版本。
另外，如果您正在使用webpack的资产捆绑，那么您在
/src中的文件将被重建。您可以在src中创建子目录。为了更快地重建，webpack只处理src中的文件。您需要将任何JS和CSS文件放在src中，否则webpack将无法看到它们。
看到这个link
pieyvz9o4#
没有，
public文件夹用于静态文件，如index.html和...
我认为你应该在src文件夹中创建一个“assets”文件夹，并以这种方式访问它们。
8iwquhpp5#
在article中，我提到
保留一个包含顶级CSS、图像和字体文件的assets文件夹。
在react最佳实践中，我们在src中保留了一个assets文件夹，其中可能包含顶级CSS，图像和字体文件。
ma8fv8wu6#
根据create-react-app文档，关于公共文件夹的使用：
通常，我们建议从JavaScript导入样式表、图像和字体。public文件夹可用于解决一些不太常见的情况：
esyap4oy7#
在继续与其他答案，我想进一步补充说，你应该创建一个'资产'文件夹下的'src'文件夹，然后创建'图像'文件夹下的'资产'文件夹。您可以将您的图像存储在'图像'文件夹，然后从那里访问它们。
a8jjtwal8#
根据我的理解，我会用更简单的方法。如果您使用公共文件夹中的资产，则构建后公共文件夹中的内容将保持不变。因此，如果您部署应用程序，在加载应用程序时，也将加载公用文件夹中的内容。假设您的内部版本为5 MB（4 MB的资产和1 MB的src）4 MB将首先下载，然后跟随src包含。即使你使用懒惰和悬念，你的应用在部署过程中也会很慢。
fumotvh39#
我想分享的是，您可以创建图像/资产文件夹中的src文件夹，只有这样你就可以访问图像更容易