如何在 Node.js 中使用把手显示图像？

在本文中，我们将讨论如何在 Node.js 中使用把手显示图像。您可以参考这篇文章在 Node.js 中设置车把视图引擎。

我们将使用以下步骤来实现我们的目标：

1. 安装快速和快速车把
2. 设置我们的快递服务器
3. 创建一个基本的 Handlebars 文件夹结构
4. 定义正确的路线

安装快速和快速车把：

npm install --save express express-handlebars

设置快递服务器：

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}`));

创建基本文件夹结构如下：

文件夹结构

将默认视图引擎更改为把手：从名为“images”的目录提供静态文件，如图像

app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");
app.use(express.static("images"));

通过上面的行，我们告诉我们的 Node.js 应用程序我们的图像将存储在哪里。我们不必在 标记中指定图像的杂乱路径。

相应地定义路由并渲染视图：

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 });
});

Handlebar 模板：现在让我们在 views 目录中创建一个 static.handlebars 文件，其内容如下：

HTML

  
      
  
  
      
Display Static Images Using Handlebars In NodeJS
  

      
  

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

输出：现在，转到 localhost:3000/static，它将在网页上呈现 GFG 徽标。

静态img src显示

现在让我们在我们的views目录中创建一个dynamic.handlebars文件，内容如下：

Javascript

    
     
  
  
  
Display Dynamic Images Using Handlebars In NodeJS
 

  

  {{#each imageList}}
  

      
{{this.name}}
         
      
      {{/each}}
  
  

输出：现在，转到 localhost:3000/dynamic，它将在网页上呈现一些图标。 （这些图像的 url 是从服务器端传递的）。

动态img src显示