Create-React-App：如何正确加载静态图像

Question

所以我有一个使用Create-React-App (CRA) 构建的应用程序。

在我的一个组件中，我需要渲染 18 张图像，不过图像非常小。这就是我目前的做法。

 renderImages() {
    return someArray.map((someValue, index) => {
      let image = require(`../images/${someValue}.png`);
      return (
        <Image src={image} key={index} />
      );
    });
  }

基本上，我正在循环一个包含所有 png 名称的数组，每个循环我将 require() 每张图像，总共 18 个。这是非常低效的，因为这些图像试图成为当组件已经安装时需要。结果，图像在 1 秒到 5 秒内不会显示；它相当不稳定。

所以我做了一些研究以了解如何正确执行此操作，显然我应该使用 webpack 配置加载图像。听起来不错，但有一个问题。我正在使用 CRA，因此我无法触及任何 webpack 配置。

然后有人建议您可以从 CRA 退出您的申请。所以我调查了一下，发现了这个post，上面写着：

不要弹出！ CRA在引擎盖下隐藏了很多东西并弹出 把它扔了。将您的 src 克隆到相对容易 另一个已完成工具设置的项目。

现在，我陷入困境。我不想从 CRA 中弹出我的应用程序并失去它附带的所有功能，但是对每个图像都使用 require 的低效代码很麻烦。

问题：如何才能正确加载这些静态图像，无论是解决 CRA 问题，还是重新编写我的代码。你们会建议我做什么？

Answer 1

浏览器只下载一次图像。所以你可以使用这样的帮助功能，在调用renderImages()之前下载你所有的图片。

function asyncDownloadImages(images) {
  var listOfImages = images.slice();
  var blankImage = new Image();

  function downloadNextImage() {
    var path = listOfImages.shift();
    blankImage.src = path;    
  }

  blankImage.onload = function() {
    if (listOfImages.length) {
      downloadNextImage();
    }
  }

  downloadNextImage();
}

var listOfImages = [
  'https://cdn-images-1.medium.com/max/1600/1*I9pLj7mYf8LC908Zi1JYzg.png',
  'https://cdn-images-1.medium.com/max/1600/1*0klm8TN3bY1pa_CmeNBuCw.png',
  'https://cdn-images-1.medium.com/max/1600/1*-9mT3HJF6ZEpXiioSxD0Kg.png',
];

asyncDownloadImages(listOfImages);

我为您编写了一些演示代码。请在jsbin 上查看。因此，您可以在开发工具中看到图像仅在 DOM 节点“root”获取标记之前下载了一次，图像节点在 src 属性中具有相同的 url。

您还可以改进此功能并为参数添加回调函数，当所有图像下载时调用。如果有必要;)