如何在 React.js 中预加载图像？

如何在 React.js 中预加载图像？ 我有下拉选择组件，其工作方式类似于菜单，但我必须预加载项目的图像图标，因为有时它们在第一次打开时不可见。

我努力了：

https://github.com/sambernard/react-preload https://github.com/sambernard/react-preload

https://github.com/wizardzloy/react-img-preload https://github.com/wizardzloy/react-img-preload

第一个有很好的 API，易于理解和使用，但是是垃圾邮件控制台，警告图像即使在加载时也没有加载。 第二个有奇怪的 API，但我尝试了示例，但它没有预加载任何内容。

所以我可能需要自己实现一些东西，但不知道从哪里开始。或者另一种可能性是使用 webpack 加载它们。

假设你有pictures: string[];- 在组件的 props 中定义的图片 url 数组。 你应该定义componentDidMount()方法在你的组件中，然后创建新的Image您想要预加载的每张图片的对象：

componentDidMount() {
    this.props.pictures.forEach((picture) => {
        const img = new Image();
        img.src = picture.fileName;
    });
}

它强制浏览器加载所有图像。