En este artículo, discutiremos cómo mostrar imágenes usando handlebars en Node.js. Puede consultar este artículo para configurar Handlebars View Engine en Node.js.
Usaremos los siguientes pasos para lograr nuestro objetivo:
- Instale manillares express y express
- Configura nuestro servidor express
- Crear una estructura básica de carpetas de Handlebars
- Definir rutas adecuadas
Instale manillares express y express:
npm install --save express express-handlebars
Configuración del servidor express:
Javascript
//importing modules
import express from "express"
import path from "path"
import exphbs from "express-handlebars"
// Express server's instance
const app = express();
const PORT = process.env.PORT || 3000;
// listening
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));
Cree una estructura básica de carpetas de la siguiente manera:
Estructura de carpetas
Cambie el motor de vista predeterminado a handlebars: para servir archivos estáticos como imágenes desde un directorio llamado «imágenes»
app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");
app.use(express.static("images"));
Con la línea anterior le estamos diciendo a nuestra aplicación Node.js dónde se almacenarán nuestras imágenes. No tendremos que especificar una ruta desordenada a nuestra imagen en nuestra etiqueta <img>.
Defina rutas y renderice vistas en consecuencia:
Javascript
// Route to display static src images
app.get("/static", (req, res) => {
res.render("static");
});
// Route to display dynamic src images
app.get("/dynamic", (req, res) => {
imageList = [];
imageList.push({ src: "icons/flask.png", name: "flask" });
imageList.push({ src: "icons/javascript.png", name: "javascript" });
imageList.push({ src: "icons/react.png", name: "react" });
res.render("dynamic", { imageList: imageList });
});
Plantillas de manillar: ahora vamos a crear un archivo static.handlebars en nuestro directorio de vistas con el siguiente contenido:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Handlebars Images Demo</title> </head> <body> <h1>Display Static Images Using Handlebars In NodeJS</h1> <br> <img src="images/gfg.png" alt="" style="border: 5px inset black;"> </body> <html>
index.js
//importing modules
import express from "express"
import path from "path"
import exphbs from "express-handlebars"
// Express server's instance
const app = express();
const PORT = process.env.PORT || 3000;
app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");
app.use(express.static("images"));
// Route to display static src images
app.get("/static", (req, res) => {
res.render("static");
});
// Route to display dynamic src images
app.get("/dynamic", (req, res) => {
imageList = [];
imageList.push({ src: "icons/flask.png", name: "flask" });
imageList.push({ src: "icons/javascript.png", name: "javascript" });
imageList.push({ src: "icons/react.png", name: "react" });
res.render("dynamic", { imageList: imageList });
})
// Listening
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));
node index.js
Salida: ahora, vaya a localhost:3000/static, que mostrará el logotipo de GFG en la página web.
Visualización estática de img src
Ahora vamos a crear un archivo dynamic.handlebars en nuestro directorio de vistas con el siguiente contenido:
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Handlebars Images Demo</title>
</head>
<body>
<h1>Display Dynamic Images Using Handlebars In NodeJS</h1> <br>
<div class="row">
{{#each imageList}}
<div class="col-md-4">
<div class="text-success" style="font-size: large;
font-weight: 700;">{{this.name}}</div>
<img src="{{this.src}}">
</div>
{{/each}}
</div>
</body>
<html>
Salida: ahora, vaya a localhost:3000/dynamic que mostrará algunos íconos en la página web. (Las direcciones URL de estas imágenes se pasan desde el lado del servidor).
Visualización dinámica de img src
Publicación traducida automáticamente
Artículo escrito por girishthatte y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA