我正在创建一个用于上传照片的表单。如果有多行图像从屏幕上消失，页面就会开始使CPU过载，并且在滚动时会滞后。
每个图像通过<input type="file/>加载到应用程序内存中，并通过URL.createObjectUrl()转换为图像。

const newImages = Array.from(event.target.files as FileList).map((file) => URL.createObjectURL(file));
setImages([...images, ...newImages]);
...
images.map((image, index) => (
    <div className="form__photo-container">
        <img src={image} className="form__photo" />
    </div>
))

字符串
然后我尝试了100张图片，它们没有将文件转换为URL，而是使用了一个指向服务器上现有图片的链接。在这种情况下，没有任何滞后，即使几乎所有的图片都从屏幕上消失了。

images.map((image, index) => (
    <div className="form__photo-container">
        <img src={"/img/test.jpg"} className="form__photo" />
    </div>
))

型
我的猜测是，滞后是由于虚拟渲染。浏览器引擎，滚动时，开始转换尚未转换的文件到一个URL一遍又一遍，而用户滚动页面，这导致CPU过载。
所以，据我所知，我需要：

1）将每个图像加载到服务器并创建指向该图像的链接，而不是将其加载到JavaScript内存中;

或

2）在此表单上禁用镜像虚拟化。

我还需要做什么或者如何实现上述两个选项？