使用 Webpack，添加图片和字体等静态资源的工作方式与 CSS 类似。
你可以 直接在 JavaScript 模块中 import 文件。 这会告诉 Webpack 将该文件包含在 bundle(包) 中。 与 CSS 导入不同，导入文件会为你提供字符串值。 此值是你可以在代码中引用的最终路径，例如 image 的 src 属性或链接到 PDF 的 href 属性。
要减少对服务器的请求数，导入小于 10,000 字节的图片将返回 data URI 而不是路径。 这适用于以下文件扩展名：bmp ，gif ，jpg ，jpeg 和 png 。 由于 #1153 ，SVG文件被排除在外。
例如：
------ ----- ---- -------- ------ ---- ---- ------------- -- -- ------- -- -- --------- ------------------ -- ------------------ -------- -------- - -- -------- --- ------ ---- ------------ ------------- - ------ ------- -------
这确保了在构建项目时，Webpack 可以正确地将该图片移动到构建文件夹中，并为我们提供正确的路径。
这也适用于 CSS ：
----- - ----------------- ---------------- -
Webpack 在 CSS 中找到所有相关模块引用（它们以 ./ 开头），并用编译后的 bundle(包) 中的最终路径替换它们。如果输入拼写错误或意外删除重要文件，你将看到编译错误信息，就像导入不存在的 JavaScript 模块一样。编译包中的最终文件名由 Webpack 从内容哈希生成。如果文件内容将来发生变化，Webpack 将在生产中为其指定一个不同的名称，因此你无需担心这些静态资源的长期缓存。
请注意，这也是 Webpack 的自定义功能。
React 不需要它，但许多人喜欢它（ React Native 使用类似的图片机制）。
处理静态资源的另一种方法将在下一节中介绍。
添加 SVG
注意：此功能适用于
react-scripts@2.0.0及更高版本。
上面的部分介绍了添加 SVG 文件的一种方法。你还可以直接导入 SVG 作为 React 组件。你可以使用这两种方法中的任何一种。在你的代码中，它看起来像这样：
------ - -------------- -- ---- - ---- -------------
----- --- - -- -- -
-----
--- ---- ------ ----- -- ---
-------
------
--
如果你不想将 SVG 作为单独的文件加载，这很方便。不要忘记导入中的花括号！ ReactComponent 导入名称是特殊的，它告诉 Create React App 你想要一个渲染 SVG 的 React 组件，而不是它的文件名。