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.

Descargar una imagen utilizando Axios en Node.js

15 Jul, 2023 Programación 
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.

Output

Descripción de la imagen aquí

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 etiqueta img está faltando comillas alrededor del atributo src, 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:

    response.send(`<img src="${image}/">`); // original

    a:

    response.send(`<img src="${image}">`); // modificado

    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 objeto ArrayBuffer, y el método Buffer.from() espera un objeto Buffer o Uint8Array como entrada. Por lo tanto, la conversión de ArrayBuffer a Buffer podría fallar o producir resultados inesperados.

    Para solucionar este problema, puedes pasar la opción responseType: 'arraybuffer' al método axios.get(), de la siguiente manera:

    const response = await axios.get(url, {responseType: 'arraybuffer'});
const buffer = Buffer.from(response.data, 'binary').toString('base64');
const image = `data:${response.headers['content-type']};base64,${buffer}`;
response.send(`<img src="${image}">`);

    De esta manera, axios devolverá los datos binarios como un ArrayBuffer, que se puede convertir de manera segura a un Buffer.

Comments are closed.