反应-延迟加载图像

Question

我有一个使用React并使用Webpack构建的网站。工作正常，现在我正在尝试对其进行一些优化。这是我当前渲染存储在app/images/files/*.png

中的图像的方式

app / images / index.js

import image1 from './files/image1.png';
import image2 from './files/image2.png';

export default {
  image1,
  image2,
};

app / components / Image.js

import React from 'react';
import images from '../images';

const Image = ({ name }) => {
  const src = images[name];
  if (!src) return null;
  return (
    <img src={src} alt={name} />
  );
}

export default Image;

然后，我可以在整个网站上使用<Image />组件，而不必担心图像来源（因为所有图像来源都列在一个文件中-app/images/index.js）；

如何使我的Image组件延迟加载图像？还是我应该和app/images/index.js玩呢？