如何为 React 应用程序保存图像

Question

我有一个create-react-appReact应用程序（使用 webpack生成），它使用 JSON 文件来检索文本内容和图像 URL 或相对路径。如果 JSON 中的内容可能会随时间发生变化，那么保存这些图像的最佳方法是什么：

1. 将项目中JSON中提到的所有图片导入并保存在src文件夹中。
2. 将图像保存在 S3 等其他服务中，然后在 JSON 文件中引用 URL。
3. 将图像保存在public文件夹中。

Answer 1

这些方法中的任何一种都可以使用，但是，每种方法都有自己的优点和缺点。

src 文件夹

存储在这里的图像具有能够作为 JavaScript 模块导入的额外好处：

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 将在包中包含导入的文件，并且 ~10K 以下的图像将被转换为数据 URI 以避免额外的网络请求。丢失的文件也将导致编译错误而不是 404，并且当内容更改时，文件名将具有哈希值以破坏缓存。

更多信息：https : //create-react-app.dev/docs/adding-images-fonts-and-files/

其他服务，如 S3

这就像任何其他外部服务器或 CDN 一样工作。

public 文件夹

文件public不会被 Webpack 捆绑，因此不会进行任何后处理处理，例如缩小。此外，您将需要使用PUBLIC_URL环境变量。文件public夹中的其他文件，例如public/index.html：

<img src="%PUBLIC_URL%/logo.png">

来自 JavaScript 代码src：

render() {
  return <img src={process.env.PUBLIC_URL + '/logo.png'} />;
}

public当您需要引用具有特定文件名的图像时，该文件夹很有用。

更多信息：https : //create-react-app.dev/docs/using-the-public-folder/