Recibí una cadena base64 como imagen del servidor y necesito configurar src de la etiqueta html img. Cuando configuro el estado de img en useEffect hook, no se muestra en el navegador.
En el navegador Chrome me da error net::ERR_INVALID_URL en la consola de javascript.
import React, { useState, useEffect } from "react"; function Captcha(props) { const [captchaImg, setCaptchaImg] = useState(""); useEffect(() => { setCaptchaImg("iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); }, []); return ( <div> <img alt="captcha" id="dnt-captcha-img" src={`data:image/png;base64,${captchaImg}`} /> </div> ); } export default Captcha;Debe especificar el Content-type de Content-encoding y el juego de caracteres correctos (p. ej., data:image/jpeg; charset data:image/jpeg;charset=utf-8;base64 ):
/*depends on what you want to pass, might not be needed here*/ setCaptchaImg("data:image/jpeg;charset=utf-8;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); return <div> <img alt="captcha" id="dnt-captcha-img" src=data:image/jpeg;charset=utf-8;base64, {captchaImg} /> </div>