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

Question

我有一个react应用程序（使用create-react-app生成，因此使用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，以避免额外的网络请求。缺少文件也会导致编译错误而不是404s，并且当内容发生变化时，文件名将具有散列缓存的哈希值。

更多信息： https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files

S3等其他服务

这与任何其他外部服务器或CDN一样。

public文件夹

Webpack中不会捆绑public中的文件，因此不要进行缩小等任何后处理处理。此外，您还需要使用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://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder