添加图片、字体和文件

使用 webpack，使用图片和字体等静态资源的工作方式与 CSS 类似。

¥With webpack, using static assets like images and fonts works similarly to CSS.

你可以直接在 JavaScript 模块中对文件进行 import。这告诉 webpack 将该文件包含在包中。与 CSS 导入不同，导入文件会为你提供一个字符串值。该值是你可以在代码中引用的最终路径，例如作为图片的 src 属性或 PDF 链接的 href。

¥You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

为了减少对服务器的请求数，导入小于 10,000 字节的图片将返回数据 URI 而不是路径。这适用于以下文件扩展名：bmp、gif、jpg、jpeg 和 png。由于 #1153，SVG 文件被排除在外。你可以通过设置 IMAGE_INLINE_SIZE_LIMIT 环境变量来控制 10,000 字节的阈值，如我们的高级配置中所述。

¥To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153. You can control the 10,000 byte threshold by setting the IMAGE_INLINE_SIZE_LIMIT environment variable as documented in our advanced configuration.

这是一个例子：

¥Here is an example:

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

这确保了在构建项目时，webpack 将正确地将图片移动到构建文件夹中，并为我们提供正确的路径。

¥This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.

这也适用于 CSS：

¥This works in CSS too:

.Logo {
  background-image: url(./logo.png);
}

webpack 在 CSS 中找到所有相关模块引用（它们以 ./ 开头）并将它们替换为编译包中的最终路径。如果你输入错误或不小心删除了一个重要文件，你将看到一个编译错误，就像你导入一个不存在的 JavaScript 模块时一样。编译包中的最终文件名由 webpack 从内容哈希生成。如果将来文件内容发生变化，webpack 会在生产环境中为其赋予不同的名称，因此你无需担心资源的长期缓存。

¥webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by webpack from content hashes. If the file content changes in the future, webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.

请注意，这也是 webpack 的自定义功能。

¥Please be advised that this is also a custom feature of webpack.

React 不需要它，但很多人喜欢它（React Native 对图片使用类似的机制）。

¥It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).

下一节将介绍另一种处理静态资源的方法。

¥An alternative way of handling static assets is described in the next section.

添加 SVG

¥Adding SVGs

注意：react-scripts@2.0.0 及更高版本以及 react@16.3.0 及更高版本提供此功能。
¥Note: this feature is available with react-scripts@2.0.0 and higher, and react@16.3.0 and higher.

上一节中介绍了一种添加 SVG 文件的方法。你还可以将 SVG 直接导入为 React 组件。你可以使用这两种方法中的任何一种。在你的代码中，它看起来像这样：

¥One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

如果你不想将 SVG 作为单独的文件加载，这会很方便。不要忘记导入中的大括号！ReactComponent 导入名称很重要，它告诉 Create React App 你想要一个渲染 SVG 的 React 组件，而不是它的文件名。

¥This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The ReactComponent import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.

提示：导入的 SVG React 组件接受 title 属性以及 svg 元素接受的其他属性。使用此属性为你的 svg 组件添加可访问的标题。
¥Tip: The imported SVG React Component accepts a title prop along with other props that a svg element accepts. Use this prop to add an accessible title to your svg component.

添加 SVG​

添加 SVG