如何将图片传递给html img tag，nodejs mongoose express handlebar

将图片传递给HTML img标签，可以通过以下步骤实现：

在Node.js中使用Mongoose连接MongoDB数据库，使用Express框架创建一个服务器。
在服务器端，使用Handlebars模板引擎渲染HTML页面。
在HTML页面中，使用img标签来显示图片。
在服务器端，将图片的路径传递给Handlebars模板引擎，然后在HTML页面中使用该路径设置img标签的src属性。

下面是具体的步骤：

安装所需的依赖包：
- Express：用于创建服务器和处理HTTP请求。
- Mongoose：用于连接MongoDB数据库。
- Handlebars：用于渲染HTML页面。
- Multer：用于处理文件上传。
- Path：用于处理文件路径。
- fs：用于读取文件。

你可以使用以下命令安装这些依赖包：

npm install express mongoose handlebars multer path fs

创建一个名为app.js的文件，并添加以下代码：

const express = require('express');
const mongoose = require('mongoose');
const handlebars = require('handlebars');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 创建Express应用
const app = express();

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.log('MongoDB连接失败', err));

// 创建图片上传的存储引擎
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});

// 创建图片上传中间件
const upload = multer({ storage: storage });

// 定义图片模型
const Image = mongoose.model('Image', { path: String });

// 设置Handlebars模板引擎
app.set('view engine', 'handlebars');
app.engine('handlebars', handlebars({
  defaultLayout: 'main',
  layoutsDir: __dirname + '/views/layouts'
}));

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 处理根路径的GET请求
app.get('/', (req, res) => {
  // 查询所有图片
  Image.find({}, (err, images) => {
    if (err) {
      console.log('查询图片失败', err);
      res.status(500).send('查询图片失败');
    } else {
      // 渲染HTML页面，并将图片路径传递给模板引擎
      res.render('index', { images: images });
    }
  });
});

// 处理图片上传的POST请求
app.post('/upload', upload.single('image'), (req, res) => {
  // 创建图片模型并保存到数据库
  const image = new Image({ path: req.file.path });
  image.save((err) => {
    if (err) {
      console.log('保存图片失败', err);
      res.status(500).send('保存图片失败');
    } else {
      res.redirect('/');
    }
  });
});

// 启动服务器
app.listen(3000, () => console.log('服务器已启动，访问 http://localhost:3000'));

创建一个名为index.handlebars的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>图片展示</title>
</head>
<body>
  <h1>图片展示</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*">
    <button type="submit">上传图片</button>
  </form>
  {{#each images}}
    <img src="{{this.path}}" alt="图片">
  {{/each}}
</body>
</html>

创建一个名为main.handlebars的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>图片展示</title>
</head>
<body>
  {{{body}}}
</body>
</html>

创建一个名为public的文件夹，并在其中创建一个名为uploads的文件夹。
运行node app.js启动服务器。

现在，你可以通过访问http://localhost:3000来上传和展示图片了。上传的图片将保存在public/uploads文件夹中，图片路径将传递给Handlebars模板引擎，并在HTML页面中使用img标签显示。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何将图片传递给html img tag，nodejs mongoose express handlebar

相关·内容

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐