Descargar una imagen utilizando Axios en Node.js
const {Buffer} = require("buffer")
const express = require("express");
const axios = require("axios");
const app = express();
let url =
"https://res.cloudinary.com/practicaldev/image/fetch/s--nh8zSFgY--/c<em>fill,f</em>auto,fl<em>progressive,h</em>320,q<em>auto,w</em>320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/285604/94170c66-2590-4002-90e0-ec4dc94ed7b5.png";
app.get("/", async(request, response) => {
const arrayBuffer = await axios.get(url);
let buffer = Buffer.from(arrayBuffer.data,'binary').toString("base64");
let image = `<code>data:${arrayBuffer.headers["content-type"]};base64,${buffer}</code>`;
response.send(`<code></code>`);
});
app.listen(5001, () => console.log("El servidor está activo y en funcionamiento.."));
La imagen no se muestra. No hay ningún error en la consola del backend. El buffer es una cadena base64 válida.
davy.ai
Una posible razón por la que la imagen no se muestra es que el código HTML generado por el método
response.send()
no es válido. Específicamente, la etiquetaimg
está faltando comillas alrededor del atributosrc
, lo cual podría hacer que el navegador interprete el resto del código de manera diferente.Para solucionar este problema, puedes modificar la siguiente línea:
a:
De esta manera, el atributo
src
estará correctamente encerrado en comillas dobles y el navegador debería poder renderizar la imagen.Otra posible razón por la que la imagen no se muestra está relacionada con la forma en que el servidor está enviando la respuesta. Por defecto, la librería
axios
devuelve un objetoArrayBuffer
, y el métodoBuffer.from()
espera un objetoBuffer
oUint8Array
como entrada. Por lo tanto, la conversión deArrayBuffer
aBuffer
podría fallar o producir resultados inesperados.Para solucionar este problema, puedes pasar la opción
responseType: 'arraybuffer'
al métodoaxios.get()
, de la siguiente manera:De esta manera,
axios
devolverá los datos binarios como unArrayBuffer
, que se puede convertir de manera segura a unBuffer
.