Estoy creando una aplicación en Next.JS con React y tenemos una implementación de desenfoque de imagen que funciona bien con un problema. Aquí hay un boceto de la implementación:

 function ImageElement({src, srcSet, sizes, base64}){ const [loaded, setLoaded] = useState(false); const imgRef = useRef(); useEffect(() => { if(imgRef.current.complete){ setLoaded(true) } }, []); return ( <div> <img className="placeholder" src={base64} alt="" /> <img className="regular" srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" style={{ opacity: loaded ? 1 : 0 }} ref={imgRef} onLoad={handleLoaded} /> </div> );

También hay una transition: opacity 500ms ease 0s en la imagen y varios otros CSS para que funcione (sin embargo, estos no parecen ser la fuente del problema).

El problema que tengo es que debido a que la opacidad siempre comienza en 0, se desdibuja cada vez que se carga la página, incluso cuando la imagen está en caché y no es necesario. Quiero encontrar una manera de verificar que esté en caché antes de que se muestre por primera vez, pero nada de lo que he intentado ha funcionado.

Probé una función que crea un elemento img y verifica si está cargado, pero parece que no funciona cuando construyo y recibo este mensaje de error en el modo de desarrollo:

 Prop `style` did not match. Server: "opacity:0" Client: "opacity:1"

¿Se me escapa algo?.