Use html native event handler <img> with React SSR.

Similar to this https://github.com/facebook/react/issues/15446 I have react APP that will do server render first to create html markup then do client render on browser again. my app returns: `<img classname="classA" src="invalid-src" fallbacksrc="valid-src" style="visibility:hidden"/> ` I am trying to use onerror event handler to replace src with valid fallback src, and use onload handler to remove style="visibility:hidden". I know React has onError and onLoad, but since i use server side render, the static html will be generated, I would like to use html native onerror and onload event handler because i do not want to wait client side react rendering with javascript, so that the image can be load as fast as possible. what I did is I manually add event handler in my html template using document.getElements. `<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> ` This works fine except the load event executed after React render on client side(JS execution). I did the workaround to add a < div > wrapper to my < img >, the problem is solved, load event executed before client side JS execution. However, I would like to see if there is any solution that does not need to add extra wrapper. PS. wrapped with React.Fragment is not working as well Would like to know if there is a way to use native dom event handler ? onload, onerror? i can not inline add those event because the event handler will be removed by React `<img classname="classA" src="invalid-src" fallbacksrc="valid-src" style="visibility:hidden" onerror="..." onload="..."/>`