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

Question

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

导入项目中JSON中提到的所有图片，并保存在src中文件夹。

将图像保存在 S3 等其他服务中，然后在 JSON 文件中引用 URL。

将图像保存在 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/