Estoy tratando de mostrar una imagen de una cadena base64 pero sigue apareciendo así:

img

Intenté imprimir la imagen y obtengo algo como esto: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwn/xAAtEAEAAgEEAQMCBgEFAAAAAAABAhEAAxIhMSJBUWETcSOBkaHB8UIyYrHR4f/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APS3aymVIvvFHaRnxTdrglUXdfESr6zRgmrI3dexd8D/ADm3Ios9S5xYUpEs/fIbGc7h5HF9fnmPCfAPq21l1NstS4yFS6vAMtmnzLeP+1vHE8yciiVU/lhWwCHdcvpzi37nZOHIKpx9sAar5ty2h3fr7ZoeMa7Rv5PtmgQk2+XveWZTScPdcvx9sCyYBKSrOy4y65zOnppGUVG6CHAZb8baU9O+PlzRJTLNM2F2rX6YBjP6lkplSX4xyTfKTIkP7cB/GcxfpR43+/xlj9OPOoRCJZZ64BjC2U5abE49PT3yyhVSixRb+xl3T1NPcUL7Pp7VmjHj3964+2A0qLKx9+c5z1HuJ5dvz/1j0yNJVN+N+uHU05zZRaDi6wMxW4w5kyeD4/vJJ21Pyiy4pO6xq9RiLJW3CwkR3NsvV7r8sBacSMpXpqJZG+35yVInc1L9PQyMpHM5FcdS5yqxSt1LY2YEuI/TIdt8+mJjp3a1XtznFJMqNzu5eM7BEk+MgOzAEYkYy1Bk7rYj8f3iL3MJRGu8haShOXiXR9/6zee9eKegbXj/AMwLpyhLcacfIL+2bUL8t6jEt6zVGI7u5cV085JJZDU1PIKoOH2wLFg1F84p11ziYw0iU9+5CxurM5xhImwra14o3+edI6W/dbQFHHWDHLdAjvjJuXO0D+c6BYTDl+MIMEfFKqspFIKy4sO67wshRfC+YlV74T6vjvVu/G8MYMEJWDW639z7Z0dzDh3Upu649HCJpyYSYoSnT2YY7tu6KBFb45LxR+r9OyUav7uF1Dc2Wtf4cP74Gaj+JublwK2/plSM/CLJl1KKfveWljyRK5sOTBKtGokNxLm15MLI6DLSdrQnq4fSnU5ly4oxIm6D5RwkjVhxKRT3WFSxHo9gLXLGEmLcg5HkxMosDydz0jnNksiM5XQ8rz/xgKWo6YpI8pO5iXXsZKlYy3Eke3o9OMUg3hNGJzydrhZG7fqlPXDVmGT2SYx4jL8qvI6TFCqTnjnMxtNrI7RvrNBnIjFUV/1V3ggz1l06kF9bapxyrVNsZBcS4vfGHU04QmEhSuZHf65QiRPpzjzdX2ffDTSiml+A82CJliSsiAQ/yF7wRjv1N0NSYVSHvjnKypWxrtwNES/pjs9DqsG2VECbd31eUJMFnu+C6xQu4xjMjuu75wP/2Q=

¿Me equivoco al intentar mostrarlo simplemente haciendo <img src={this.state.img} />? ¡Gracias por la ayuda!

EDITAR: También actualicé esta publicación para contener cómo estoy generando mi código base64. Básicamente, subo una imagen y la recorto usando https://www.npmjs.com / paquete / react-image-crop. Luego, quiero mostrar la imagen recortada y ahí es donde ocurre el problema.

<div>
     <input type="file" onChange={this.onSelectFile} />
</div>

onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () =>
          this.setState({
            src: reader.result,
            openCropper: true
          }),
        false
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  };


function getCroppedImg(image, pixelCrop, fileName) {

  const canvas = document.createElement('canvas');
  canvas.width = pixelCrop.width;
  canvas.height = pixelCrop.height;
  const ctx = canvas.getContext('2d');

  ctx.drawImage(
    image,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    pixelCrop.width,
    pixelCrop.height
  );

  // As Base64 string
  const base64Image = canvas.toDataURL('image/jpeg');
  return base64Image;
2
Tim 16 oct. 2018 a las 00:52

2 respuestas

La mejor respuesta

Los problemas pueden deberse al contexto desde el que se llama a su onSelectFile. Actualmente, estás definiendo onSelectFile como una función de flecha. Esto a su vez significa que this.setState no estará definido cuando su FileReader cargue los datos de la imagen (y luego intente actualizar el estado del componente).

Considere el siguiente código que describe una posible solución para su problema:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        src:''
    }
  }

  // Define as class method rather than arrow function
  onSelectFile(e) {

    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () =>
          this.setState({
            src: reader.result,
            openCropper: true
          }),
        false
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  }

  render() {
    return (
      <div>
     {/* invoke onSelectFile in this way to ensure calling context is 
         current component */}
     <input type="file" onChange={(e) => this.onSelectFile(e)} />
     <img src={this.state.src} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

Para ver una demostración funcional, consulte este jsFiddle. ¡Espero que esto ayude!

1
Dacre Denny 15 oct. 2018 a las 22:17

Creo que le falta un signo igual al final de su URL base64.

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwn/xAAtEAEAAgEEAQMCBgEFAAAAAAABAhEAAxIhMSJBUWETcSOBkaHB8UIyYrHR4f/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APS3aymVIvvFHaRnxTdrglUXdfESr6zRgmrI3dexd8D/ADm3Ios9S5xYUpEs/fIbGc7h5HF9fnmPCfAPq21l1NstS4yFS6vAMtmnzLeP+1vHE8yciiVU/lhWwCHdcvpzi37nZOHIKpx9sAar5ty2h3fr7ZoeMa7Rv5PtmgQk2+XveWZTScPdcvx9sCyYBKSrOy4y65zOnppGUVG6CHAZb8baU9O+PlzRJTLNM2F2rX6YBjP6lkplSX4xyTfKTIkP7cB/GcxfpR43+/xlj9OPOoRCJZZ64BjC2U5abE49PT3yyhVSixRb+xl3T1NPcUL7Pp7VmjHj3964+2A0qLKx9+c5z1HuJ5dvz/1j0yNJVN+N+uHU05zZRaDi6wMxW4w5kyeD4/vJJ21Pyiy4pO6xq9RiLJW3CwkR3NsvV7r8sBacSMpXpqJZG+35yVInc1L9PQyMpHM5FcdS5yqxSt1LY2YEuI/TIdt8+mJjp3a1XtznFJMqNzu5eM7BEk+MgOzAEYkYy1Bk7rYj8f3iL3MJRGu8haShOXiXR9/6zee9eKegbXj/AMwLpyhLcacfIL+2bUL8t6jEt6zVGI7u5cV085JJZDU1PIKoOH2wLFg1F84p11ziYw0iU9+5CxurM5xhImwra14o3+edI6W/dbQFHHWDHLdAjvjJuXO0D+c6BYTDl+MIMEfFKqspFIKy4sO67wshRfC+YlV74T6vjvVu/G8MYMEJWDW639z7Z0dzDh3Upu649HCJpyYSYoSnT2YY7tu6KBFb45LxR+r9OyUav7uF1Dc2Wtf4cP74Gaj+JublwK2/plSM/CLJl1KKfveWljyRK5sOTBKtGokNxLm15MLI6DLSdrQnq4fSnU5ly4oxIm6D5RwkjVhxKRT3WFSxHo9gLXLGEmLcg5HkxMosDydz0jnNksiM5XQ8rz/xgKWo6YpI8pO5iXXsZKlYy3Eke3o9OMUg3hNGJzydrhZG7fqlPXDVmGT2SYx4jL8qvI6TFCqTnjnMxtNrI7RvrNBnIjFUV/1V3ggz1l06kF9bapxyrVNsZBcS4vfGHU04QmEhSuZHf65QiRPpzjzdX2ffDTSiml+A82CJliSsiAQ/yF7wRjv1N0NSYVSHvjnKypWxrtwNES/pjs9DqsG2VECbd31eUJMFnu+C6xQu4xjMjuu75wP/2Q==

1
Sensational Code 15 oct. 2018 a las 22:02