¿Cómo obtener imágenes del servidor Node.js?

Las imágenes, los archivos CSS, los archivos JavaScript y otros archivos que el cliente descarga del servidor se conocen como archivos estáticos. Estos archivos estáticos se pueden recuperar con el uso del marco expreso y sin el uso de él. Los métodos que se pueden utilizar para servir archivos estáticos se analizan a continuación.

La imagen a la que se accede (geeksforgeeks.png) se coloca dentro de la carpeta de imágenes , como se muestra en el árbol de directorios a continuación:

Árbol de directorios:

server.js
package.json
package-lock.json
nodemoules
  | -- *
images
  | -- geeksforgeeks.png
public
  | -- index.html

Método 1: Uso del marco Express: al usar el marco Express, su función de middleware incorporada express.static() se puede usar para servir archivos estáticos.
 

Sintaxis:

express.static(root, [options])

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

• root: Especifica el directorio desde el cual se van a servir los archivos estáticos. Básicamente, todos los archivos estáticos residen en el directorio público.
• opciones: se utiliza para especificar otras opciones sobre las que puede leer más aquí .

Ejemplo: el siguiente código es un ejemplo de cómo obtener una imagen u otros archivos estáticos del servidor del Node.

Nombre de archivo: servidor.js

// Requiring module
const express = require('express');
 
// Creating express object
const app = express();
 
// Defining port number
const PORT = 3000;                 
 
// Function to serve all static files
// inside public directory.
app.use(express.static('public')); 
app.use('/images', express.static('images'));
 
// Server setup
app.listen(PORT, () => {
  console.log(`Running server on PORT ${PORT}...`);
})

Pasos para ejecutar el programa:

1. Instale express usando el siguiente comando:

npm install express

2. Ejecute el archivo server.js con el siguiente comando:

node server.js

3. Abra cualquier navegador y vaya a http://localhost:3000/images/geeksforgeeks.png y verá el siguiente resultado:

La salida del comando anterior

Método 2: Sin usar el framework express: Para servir archivos estáticos usando los fundamentos de Node.js, podemos seguir estos pasos:

1. Analice la solicitud HTTP entrante para conocer la ruta solicitada.
2. Compruebe si existe la ruta para responder al estado como correcto o no encontrado (opcional).
3. Obtenga la extensión del archivo para establecer el tipo de contenido.
4. Sirva el tipo de contenido en el encabezado y sirva el archivo solicitado como respuesta.

Nombre de archivo: servidor.js

// Requiring modules
const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");
 
// Creating server to accept request
http.createServer((req, res) => {
 
    // Parsing the URL
    var request = url.parse(req.url, true);
 
    // Extracting the path of file
    var action = request.pathname;
 
    // Path Refinements
    var filePath = path.join(__dirname,
            action).split("%20").join(" ");
 
    // Checking if the path exists
    fs.exists(filePath, function (exists) {
 
        if (!exists) {
            res.writeHead(404, {
                "Content-Type": "text/plain" });
            res.end("404 Not Found");
            return;
        }
 
        // Extracting file extension
        var ext = path.extname(action);
 
        // Setting default Content-Type
        var contentType = "text/plain";
 
        // Checking if the extension of
        // image is '.png'
        if (ext === ".png") {
            contentType = "image/png";
        }
 
        // Setting the headers
        res.writeHead(200, {
            "Content-Type": contentType });
 
        // Reading the file
        fs.readFile(filePath,
            function (err, content) {
                // Serving the image
                res.end(content);
            });
    });
})
 
// Listening to the PORT: 3000
.listen(3000, "127.0.0.1");

Pasos para ejecutar el programa:

1. Instale express usando el siguiente comando:

npm install express

2. Ejecute el archivo server.js con el siguiente comando:

node server.js

3. Abra cualquier navegador y vaya a http://localhost:3000/images/geeksforgeeks.png y verá el siguiente resultado:

La salida del comando anterior