添加图片、字体和文件

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

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

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

以下是一个示例

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 会正确地将图像移动到构建文件夹中，并提供正确的路径。

这在 CSS 中也有效。

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

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

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

它不是 React 所必需的，但许多人喜欢它（React Native 使用类似的机制来处理图像）。

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

添加 SVG

注意：此功能适用于 [email protected] 及更高版本，以及 [email protected] 及更高版本。

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

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 组件，而不是它的文件名。

提示：导入的 SVG React 组件接受一个 title 属性以及 svg 元素接受的其他属性。使用此属性为你的 svg 组件添加一个可访问的标题。

添加 SVG​

添加 SVG