如何将图片传递给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元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
