Create-React-App：如何正确加载静态图像-Java 学习之路

所以我有一个使用Create-React-App（CRA）构建的应用程序 .

在我的一个组件中，我需要渲染18个图像，而不是小图像 . 这就是我目前正在做的事情 .

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

基本上，我'm looping through an array that has all the names of the png'，每个循环我将 require() 每个图像，总共18个 . 这是非常低效的，因为当组件已经安装时，这些图像正在尝试被要求 . 结果，图像将不会显示从1秒到5秒;它相当不稳定 .

所以我做了一些研究，看看如何正确地做到这一点，显然我应该使用webpack配置加载图像 . 听起来不错，但有问题 . 我正在使用CRA，因此我不允许触摸任何webpack配置 .

然后有人建议你可以从CRA申请你的申请 . 所以我调查了一下，发现了这个post，其中说：

不要弹出！ CRA在引擎盖下隐藏了很多东西并且弹出它 . 在完成工具设置的情况下将src克隆到另一个项目中相对容易一些 .

现在，我陷入困境 . 我不想从CRA中弹出我的应用程序并丢失它附带的所有功能，但是对于每个图像使用require的低效代码是令人烦恼的 .

Question: 如何正确加载这些静态图像，无论是使用CRA还是重新编写代码 . 你们会建议我做什么？

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的图像节点的标记之前，只下载了一次图像 .

此外，您可以改进此功能并向参数添加回调函数，该参数将在下载所有图像时调用 . 如果有必要;）

回复于 2024-05-08T22:41:08+08:00

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

1 回答

相关问题