Tengo una aplicación de reacción que primero renderizará el servidor para crear el marcado html y luego volverá a renderizar el cliente en el navegador.
mi aplicación regresa
<img classname="classA" src="invalid-src" fallbacksrc="valid-src" style="visibility:hidden"/>Estoy tratando de usar el controlador de eventos onerror para reemplazar src con un src alternativo válido, y uso el controlador de carga para eliminar style="visibility:hidden". Sé que React tiene onError y onLoad, pero como uso el renderizado del lado del servidor, se generará el html estático, me gustaría usar el controlador de eventos onerror y onload nativo de html porque no quiero esperar el renderizado de reacción del lado del cliente con javascript.
lo que hice fue agregar manualmente el controlador de eventos en mi plantilla html
<html> <{react-server-rendered-html}/> <script> var images = document.getElementsByClassName("classA"); for (img of images) { img.addEventListener("error", function e() { const i = this.getAttribute("fallbacksrc"); i && (this.src = i), this.removeEventListener("error", e) }), img.addEventListener("load", function e() { console.log("onloading", this.src), "hidden" === this.style.visibility && (this.style.visibility = null), img.removeEventListener("load", e) }); } </script> </html>Esto funciona bien, excepto que el evento de carga se ejecuta después de que React renderice en el lado del cliente. Hice la solución alternativa para agregar un contenedor <div> a mi <img>, el problema se resolvió, el evento de carga se ejecutó antes de que el lado del cliente reaccionara. Sin embargo, me gustaría ver si hay alguna solución que no necesite agregar un envoltorio adicional.
PD. envuelto con React.Fragment tampoco funciona.