Estoy trabajando en un programa de reacción para obtener una imagen del backend y mostrarla en el frontend. La llamada a la API funciona bien y puedo obtener la vista previa de la imagen en el cartero mientras pruebo la API. Pero no pude convertirlo en una imagen en la parte delantera.
A continuación se muestra la respuesta que recibí del backend:
{data: '����\x00\x10JFIF\x00\x01\x01\x01\x00H\x00H\x00\x00��\x02(ICC_PROFILE\x00\x01\x01\x00\x00\x02\x18\x00\x00\x00\x00\x02\x10\x00\x00…��M�M�2(݃\x04�#�ɤ�j7�\x02�W\x137�1x�-��.b[�Y���7%���];�H��', status: 200, statusText: '', headers: {…}, config: {…}, …}Aquí los datos son la versión de cadena de la imagen y necesito convertirlos en una imagen en la interfaz. A continuación se muestra mi código de interfaz:
import './App.css'; import axios from 'axios'; import React, {useState, useEffect} from 'react'; function App() { const[imageUrl, setImageUrl] = useState('') useEffect(() => { axios.get('http://localhost:8080/userImage/userthree@email.com/download/', { headers: { } }) .then(response => { console.log(response) const url = URL.createObjectURL(response.data); setImageUrl(response.data) console.log(url) }) .catch(err => { console.log(err) }) },[]) return ( <div className="App"> <img src={imageUrl} alt="Image Placeholder"/> </div> ); } export default App;No estoy seguro de si está utilizando el tipo de respuesta o no. Debe especificar el tipo de respuesta como blob
return axios .get(url, { responseType: 'blob' }).then()para cuerda
<img src={`data:image;base64,${img}`} alt="img" />otra forma para Objetos como Archivo y BLOB
const imgUrl = URL.createObjectURL(img);Parece que está pasando una cadena a URL.createObjectURL() . De acuerdo con los documentos , en su lugar, debería pasar un objeto; más específicamente un objeto File, Blob o MediaSource.
Pasé un tiempo buscando una solución y, aunque sospecho que no es la más eficiente, al menos funciona.
En el backend, asegúrese de enviar una cadena base64:
const fs = require('fs'); const path = require('path'); app.get('/photo-test', async (req, res) => { let base64 = await fs.readFileSync(path.join(__dirname, "photos", "testPhoto.png"), 'base64'); //change the path to your specific photo res.status(200).send(base64).end(); }); Luego, en reaccionar, convierta la cadena base64 en un nuevo Blob y utilícelo para URL.createOjectURL([new Blob]) .
const [imageUrl, setImageUrl] = useState('') function base64toBlob(base64Data, contentType) { contentType = contentType || ''; var sliceSize = 1024; var byteCharacters = atob(base64Data); var bytesLength = byteCharacters.length; var slicesCount = Math.ceil(bytesLength / sliceSize); var byteArrays = new Array(slicesCount); for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) { var begin = sliceIndex * sliceSize; var end = Math.min(begin + sliceSize, bytesLength); var bytes = new Array(end - begin); for (var offset = begin, i = 0; offset < end; ++i, ++offset) { bytes[i] = byteCharacters[offset].charCodeAt(0); } byteArrays[sliceIndex] = new Uint8Array(bytes); } return new Blob(byteArrays, { type: contentType }); } useEffect(() => { axios.get('http://localhost:5000/photo-test', { headers: { } }) .then(response => { const blob = base64toBlob(response.data); const url = URL.createObjectURL(blob); setImageUrl(url) }) .catch(err => { console.log(err) }) }, []) return ( <div className="App"> <img src={imageUrl} alt="Image Placeholder" /> </div>Tenga en cuenta la nueva función base64toBlob tomada de esta publicación de desbordamiento de pila.