选项1： 延迟加载从可重复使用内的图像class component。您可以从这里加载图像name和images文件夹的相对路径component；然而，它仍然要求所有图像在运行时和生产编译期间都存在。换句话说，您images文件夹中的内容就是您一直在使用的内容。

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class LazyLoadImage extends Component {
  state = { src: '', err: '' };

  componentDidMount = () => {
    this.loadImage();
  };

  loadImage = async () => {
    try {
      const { default: src } = await import(/* webpackMode: "lazy" */ `../../images/headers/${this.props.name}.png`);
      this.setState({ src });
    } catch (err) {
      this.setState({ err: err.toString() });
    }
  }; 

  render = () => (
    <Fragment>
      <h5>Lazy Load Images</h5>
      <img src={this.state.src} alt="example.png" />
      {this.state.err && <p>{this.state.err} </p>}
    </Fragment>
  );
}

LazyLoadImage.propTypes = {
  name: PropTypes.string.isRequired,
};

export default LazyLoadImage;

选项 2：理想的选择是构建一个图像微服务或使用处理所有图像的 CDN。您需要做的就是存储指向图像的链接，例如，您将存储一个string喜欢的：（http://localhost:4000/uploads/image.ext如果您使用 CDN，它将类似于：https : //i.imgur.com/foiVXpi .png）。客户端将检索它string（从数据库中）GET并向此链接发出请求（当 HTTPstring添加到img元素的src属性时<img src="http://example.com/img.png" />——它会自动GET向该地址发出请求）。

这提供了最大的灵活性，因为您只需更改此字符串即可非常轻松地添加/删除/替换图像（它也不需要在您的images文件夹中才能加载）；它还提供最佳性能——因为它将所有图像工作从客户端卸载到专用服务。

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const ImageFromCDN = ({ src }) => (
  <Fragment>
    <h5>Image From CDN</h5>
    <img src={src} alt="example.png" />
  </Fragment>
);

ImageFromCDN.propTypes = {
  src: PropTypes.string.isRequired,
};

export default ImageFromCDN;

您应该使用 redux/context 用新状态包装您的 Account 功能组件并实时更改图像 src