Estoy tratando de implementar una animación cuadro por cuadro intercambiando la imagen src cada 100 ms. Cada vez que la imagen se intercambia, React descargará la imagen nuevamente (con un nombre generado aleatoriamente) en lugar de usar la versión en caché. Esto hace que la animación salte una parte importante de los fotogramas si la imagen no se descarga en 100 ms. ¿Hay alguna manera de obligar al componente a almacenar en caché las imágenes y usarlas sin recargar?

Captura de pantalla de la pestaña de red que muestra la recarga de imágenes con nombres de archivo generados aleatoriamente

Código del componente de prueba:

 import React, { useState, useEffect } from 'react' import Walk1 from '../assets/sam_sprites/walk/walk_1.png' import Walk2 from '../assets/sam_sprites/walk/walk_2.png' import Walk3 from '../assets/sam_sprites/walk/walk_3.png' import Walk4 from '../assets/sam_sprites/walk/walk_4.png' import Walk5 from '../assets/sam_sprites/walk/walk_5.png' import Walk6 from '../assets/sam_sprites/walk/walk_6.png' import Walk7 from '../assets/sam_sprites/walk/walk_7.png' import Walk8 from '../assets/sam_sprites/walk/walk_8.png' import Walk9 from '../assets/sam_sprites/walk/walk_9.png' const Test = () => { const [currentImage, setCurrentImage] = useState({Walk1}) const [imageQueue, setImageQueue] = useState([ Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9, ]) useEffect(() => { const timer = setInterval(() => { setImageQueue((prev) => { setCurrentImage(prev[0]); return prev.slice(1); }) }, 100); return () => clearInterval(timer); }, []); return ( <div> <div style={{position: 'absolute'}}>{imageQueue}</div> <img src={currentImage}/> </div> ) } export default Test