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

我有一个react应用程序（使用

create react app

so with webpack生成），它使用JSON文件检索文本内容和图像URL或相对路径。如果JSON中的内容可能会随时间变化，那么保存这些图像的最佳方法是什么：

在项目中导入JSON中提到的所有图像，并将它们保存在

src

文件夹中

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

将图像保存在

public

文件夹中

---

然而，这些方法中的任何一种都会起作用，每种方法都有各自的优缺点

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;

从

src

中的JavaScript代码：

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

render（）{
返回；
}

当您需要引用具有特定文件名的图像时，

public

文件夹非常有用

更多信息：

---

如果要渲染100个图像，是否要添加100个导入？不可扩展@edwardtorvalds会看到“公用文件夹”选项，或者S3选项

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