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

Question

我有一个使用 JSON 文件检索文本内容和图像 URL 或相对路径的反应应用程序（使用create-react-app 生成，因此使用 webpack）。如果 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">

来自src中的JavaScript代码：

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

public 文件夹在您需要引用具有特定文件名的图像时很有帮助。

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