首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

下面是具体的步骤:

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

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

代码语言:txt
复制

npm install express mongoose handlebars multer path fs

代码语言:txt
复制
  1. 创建一个名为app.js的文件,并添加以下代码:
代码语言:javascript
复制
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'));
  1. 创建一个名为index.handlebars的文件,并添加以下代码:
代码语言:html
复制
<!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>
  1. 创建一个名为main.handlebars的文件,并添加以下代码:
代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
  <title>图片展示</title>
</head>
<body>
  {{{body}}}
</body>
</html>
  1. 创建一个名为public的文件夹,并在其中创建一个名为uploads的文件夹。
  2. 运行node app.js启动服务器。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券