He subido una imagen. Ahora, tengo una API de descarga que me da esta imagen como datos. La respuesta se ve así:
el encabezado de la respuesta es así:
Ahora el problema es que quiero mostrar esta imagen en la página web usando la etiqueta img o cualquier otra cosa posible en reaccionar js. Pasar el contenido a src attr no muestra nada. ¿Alguien tiene alguna idea? ¿Hay alguna manera posible?
Debería poder usar FileReader para convertir la respuesta al formato base64 que se puede usar en el atributo src:
// Request was successful, get image blob const blob = await response.blob() // Convert the blob to base64 const reader = new FileReader() reader.readAsDataURL(blob) // Get the converted image and set it where needed reader.onloadend = () => { const base64Image = reader.result // Set the image to the src of the image tag or setState as you need }Esto también funcionó para mí además de la respuesta anterior:
const fetchImage = async () => { fetch(apiUrl, { method: 'get', headers: new Headers({ Authorization: `Bearer ${getCookie('accessToken')}`, }), }) .then((response) => response.blob()) .then((myBlob) => { const objectURL = URL.createObjectURL(myBlob); setImageUrl(objectURL); });};