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 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:
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 atributosrc
con los datos codificados en base64.Aquí tienes un ejemplo de fragmento de código:
En el fragmento de código anterior,
data
es el dato codificado en base64 que recibiste de la API. El atributosrc
de la etiquetaimg
está configurado comodata:image/png;base64,
seguido de los datos. Puedes reemplazarpng
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 propiedaddata
obtenida de la API.