es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Mi respuesta no es un enlace, ¿cómo puedo mostrar una imagen que no es una URL utilizando base64 y la respuesta no contiene bodyBytes?

Mi respuesta no es un enlace, ¿cómo puedo mostrar una imagen que no es una URL utilizando base64 y la respuesta no contiene bodyBytes?

13 Jul, 2023 Programación

Mi api es get() y la respuesta contiene data de esta manera.

La siguiente imagen que puedes ver es mi imagen que quiero mostrar en la web usando ReactJS. No sé cómo hacerlo. La api get devuelve data, config, headers, request, status, statusText. Quiero que la imagen de arriba, que está en un formato extraño, se muestre. No sé cómo hacerlo. Necesito ayuda.

Actualización:

action

export const getFileImage = (payload) => async dispatch => {
    try {
        console.log("Payload--->",payload);
        let response = await axios.get('/api/movies/' + payload.movieId + '/document/' + payload.genre.toLowerCase().toString());
        console.log("Response----->",response);

    } catch (error) {
        console.log("error");
    }
}

Resultado de response:

enter image description here
enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En primer lugar, los datos que recibiste están en formato base64. Para mostrar una imagen usando ReactJS, puedes usar la etiqueta HTML img y configurar el atributo src con los datos codificados en base64.

    Aquí tienes un ejemplo de fragmento de código:

    import React from 'react';

const ImageComponent = ({ data }) => {
  return (
    <div>
        <img src="{`data:image/png;base64," ${data}`}="" alt="Tu imagen">
    </div>
  );
}

export default ImageComponent;

    En el fragmento de código anterior, data es el dato codificado en base64 que recibiste de la API. El atributo src de la etiqueta img está configurado como data:image/png;base64, seguido de los datos. Puedes reemplazar png con el formato real de la imagen.

    Una vez que hayas creado el ImageComponent, puedes usarlo para mostrar la imagen en tu aplicación ReactJS pasando la propiedad data obtenida de la API.

Comments are closed.