如何将图片传递给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标签显示。

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

有帮助

没帮助

相关·内容

Nodejs开发框架Express3.0开发手记–从零开始

目录此文重点介绍Express3.0的开发框架，其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。...安装session-mongoose依赖库 D:\workspace\project\nodejs-demo>npm install session-mongoose D:\workspace\project...\nodejs-demo\node_modules\session-mongoose\node_modules\mongoose\node_modules\mongodb\node_modules\bson...原理是在框架内每次赋值，把我们刚才手动传值的过程，让框架去完成了。 8. 页面提示登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。...如果你也出现图片显示的内容，那么恭喜你了。 Nodejs使用Express3.0框架的第一步你已经完成了，并且还使用了ejs,bootstrap,mongoose库的使用。希望此文对大家有所帮助。

5.8K12 0

arkTS开发鸿蒙OS个人商城案例【2024最新新年限定开发案例QAQ】

命名参数机制：父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段。示例：CompA: ({ aProp: this.aProp })。...从父组件初始化：父组件使用命名参数机制，将指定参数传递给子组件。本地初始化的默认值在有父组件传值的情况下，会被覆盖。初始化子节点：组件中状态变量可以传递给子组件，初始化子组件对应的状态变量。...除了Web应用外，NodeJS也被应用在许多方面，本文盘点了NodeJS在其它方面所开发的十大令人神奇的项目，这些项目涉及到应用程序监控、媒体流、远程控制、桌面和移动应用等等。...console.log(JSON.stringify(this.items)) } build(){ // 标题部分 Column(){ // 自定义组件之间传参...("Users", Users); const shangpin = mongoose.model("Shangpin", Shangpin); const fenlei = mongoose.model

4561 0

mongoDB从入门到实战全套小白教程

图片.png 4：记住自己安装的路径 C:\Program Files\MongoDB\Server\4.0\ ? 图片.png 5：在 C 盘安装了 mongodb ?...官方教程：http://www.runoob.com/nodejs/nodejs-tutorial.html 1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，...生成四个文件夹，主文件app.js与配置信息文件packetage.json bin是项目的启动文件，配置以什么方式启动项目，默认 npm start public是项目的静态文件，放置js css img...等文件 routes是项目的路由信息文件,控制地址路由 views是视图文件，放置模板文件ejs或jade等（其实就相当于html形式文件啦~) express这样的MVC框架模式，是一个Web项目的基本构成...router = express.Router(); var mongoose = require('mongoose'); var user = require('..

1.9K3 0

在线考试系统（vue2 + elementui + express4 + MongoDB）

loading: 'static/loading-svg/loading-bars.svg', // 图片还没加载时的svg图片 try: 1 // default 1 }) 使用懒加载：.../common/img/logo.png') // 不能写成： mongoose 操作mongodb的 npm i mongoose --save 就不一一列举所有的插件了（没有用vuex）开发上的一些事...click="addDialogOption">添加选项 query要用path来引入，params要用name来引入 goToExam(id){ // params传参只能用...初始化一条数据如果对mongodb，mongoose没有基础的了解，建议看一看mongoose深入浅出，mongoose基础操作 // controllers/student.js const

8.8K4 0

Node.js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js bootstrap express 以及数据库的操作：使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本...还没有装express的可以移步到这里看看express框架的获取安装 1.简单地项目初始化进入你的nodejs安装路径下边，如图，然后执行命令 express -e test (这里把项目名设置为...好现在开始解析如何构建这个小项目：因为我们直接使用了后缀名 .html ，所以我们要先修改一下ejs模板，再把原来views目录下模板文件后缀改成 .html var app = express(...nodejs驱动，可以在异步的环境下执行。...期间可以自己查看mongodb数据库里边nodedb --> user 数据的改动，使用mongoVUE或者命令查看）需要代码的可移步至Github： https://github.com/imwtr/nodejs_express_login_register

7.2K1 0

不容错过的 Node.js 项目架构

图片描述因为有一天，您将希望在一个 CLI 工具上来使用您的业务逻辑，又或从来不使用。对于一些重复的任务，然后从 Node.js 服务器上对它自己进行调用，显然这不是一个好的主意。 ?...图片描述 ☠️ 不要将您的业务逻辑放入控制器中!!...不要将 req 或 res 传递给服务层不要从服务层返回任何与 HTTP 传输层相关的信息，例如 status code（状态码）或者 headers 例子 route.post('/', validators.userSignup...让我们看一下经典的 Express.js 应用初始化 const mongoose = require('mongoose'); const express = require('express...app return app; }) The mongo loader loaders/mongoose.js import * as mongoose from 'mongoose' export

5.9K3 0

基于arkTS开发鸿蒙app应用案例——大学生签到系统

Image($r('app.media.icon')) .alt($r('app.media.icon')) // 使用alt，在网络图片加载成功前使用占位图...None' ){ // 停止文本时钟 this.controller.stop() // 传递给后端...const mongoose = require('mongoose') //连接mongodb数据库 mongoose.connect("mongodb://localhost:27017/DoList...// user_api.js const express = require('express'); const router = express.Router(); const { users } =...// user_api.js const express = require('express'); const router = express.Router(); const { qiandao }

2231 0

Nuxt + Koa2 + Mongodb 手撸一个网上商城

2017年跟着教程做了一个全栈的商场(vue + express + mongodb)，2019年，工作中一直做前端，之前学过的都忘了，所以准备用 Nuxt + koa2 + mongodb 重写一次.../mongodb/mongodb-window-install.html 克隆项目 https://github.com/FinGet/koa-nuxt-mall install dependencies...passport.js是Nodejs中的一个做登录验证的中间件，极其灵活和模块化，并且可与Express、Sails等Web框架无缝集成。...Schema({ "type": String, "img_url": String, "price": Number, "title": String, "imgs": Array...最后项目中所有图片均来自网络，如果存在侵权情况，请第一时间告知。本项目仅做学习交流使用，请勿用于其他用途。

7.9K1 0

Nuxt + Koa2 + Mongodb 手撸一个网上商城

2017年跟着教程做了一个全栈的商场(vue + express + mongodb)，2019年，工作中一直做前端，之前学过的都忘了，所以准备用 Nuxt + koa2 + mongodb 重写一次。.../mongodb/mongodb-window-install.html 克隆项目 https://github.com/FinGet/koa-nuxt-mall install dependencies...passport.js是Nodejs中的一个做登录验证的中间件，极其灵活和模块化，并且可与Express、Sails等Web框架无缝集成。...new Schema({ "type": String, "img\_url": String, "price": Number, "title": String, "imgs...最后项目中所有图片均来自网络，如果存在侵权情况，请第一时间告知。本项目仅做学习交流使用，请勿用于其他用途。

9.4K1 0

原生 JavaScript + NodeJS(Express 框架) 做一个简陋的登录注册项目

bcryptjs 加密 mongoose 操作 MongoDB 大概说明一下前后端分离, 通过 json 传递信息....} } }; }); }; 调用时候就能这样 _ajax({url:xxxxx}).then(res=>{fun(res)},rej=>{fun(rej)}).then... html...bcrypt 散列一下 return bcryptjs.hashSync(val,bcryptjs.genSaltSync(10)); }, }, }); 用户登录成功后, nodejs...); res.send({"message":"成功", "data": { user, token: token }}); }); 验证码使用 svg-captcha 生成, 前端有一个 img...标签调用验证码 api, 并得到图片, 服务端将验证码文字存入 session 中.

8732 0

深入浅出mongodb(一)

console.log('当mongodb成功连接数据库之后会打印这个日志'); }) connect.on("error",(error)=>{ console.log('如果连接失败了,会把失败的原因传递给...UserSchema); let UserModel2 = connection.model("User"); console.log(UserModel == UserModel2); image.png 传两个参数表示定义模型...传一个参数表示引用或者说是获取这个模型 UserModel.create({name:'vivo'},(err,doc)=>{ //err是错误对象 //doc是保存成功之后的文档对象...[2] mongodb命令行: https://www.runoob.com/mongodb/mongodb-create-database.html [3] mongoose官网: https://...mongoosejs.com [4] CommonJS规范: https://javascript.ruanyifeng.com/nodejs/module.html [5] mongoose官网: https

4K1 0

基于 Express 应用框架的技术方案选型浅谈

设计完成后将开发态页面使用 Webpack 打包构建，构建目录为服务端 Express 的静态资源目录。首屏渲染的工作交给 Ejs 模板引擎（事实上也可以直接使用 HTML 字符串渲染）进行处理。...# 静态资源目录 │ ├── css/ # 样式 │ ├── imgs/ # 图片...Vue 技术方案选型 2018年6月，使用 Vue 设计了服务端渲染的 Express 应用，大致技术选型如下： Mongoose Nuxt Vue lokka Muse-UI 客户端和服务端同构代码的...# Nuxt构建目录（Nuxt预设目录） ├── assets # 资源目录（Nuxt预设目录） │ ├── img...# 项目打Tag脚本 └── tsconfig_node.json # TypeScript配置文件运行脚本设计在package.json中的配置脚本如下： "build

7K3 0

Node.js 开发实践，前端工程师的 MVP 利器

本文经作者授权转载至公众号 “Nodejs技术栈”，作者：愚坤，掘金优秀作者，一名没上高中的前端工程师，目前就职水滴筹。...当然，这个过分的js帮助了我很多，从被后端大佬揪着耳朵按到工位上温声细语的说：“我套完页面样式乱了，帮我调下样式”，演变成大佬气冲冲的跑到我工位慈眉善目的拍着桌子说：“TM接口参数传错了”。.../config.js'); const dbs = async function (env) { const mongoose = require('mongoose'); mongoose.connect...const mongoose = require('mongoose'); const { db } = global; // 创建Model const model = new mongoose.Schema...coachId:String, // 教练ID }, { timestamps: true, // 自动增加创建、更新时间 }); const dbManage = db.model('tag

8972 0

前端开发者不得不知道的18个常用的网站

1.npm NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用...允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用界面如下： 2.Express Express基于 Node.js 平台，快速、开放、极简的 Web 开发框架关于Express的介绍可参考...Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速、免费的前端开源项目 CDN 加速服务截止目前共收录了 3606 个前端开源项目界面如下： 4.mongoose...所有样式都基于class，只需为 HTML 元素指定class，样式立刻生效界面如下： 8.RAP2 RAP2是一个可视化接口管理工具，通过分析接口结构，动态生成模拟数据，校验真实接口正确性，围绕接口定义...国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能界面如下： 15.favicon favicon提供ico图标在线制作、快速ico图标制作、icon图标制作、可以将png转ico、所有图片转

1.4K1 0

简易漫画网站搭建-漫画喵Server版

前端的话，使用标准的Html，Css和Js就可以。后台是个API Server，Python + Flask 或者 Nodejs + Express 都是不错的选择（使用起来很简单。。。）...├── cartoon.html ├── chapter.html ├── css ├── img ├── index.html ├── js...package.json 是nodejs的包管理器，在这里可以定义依赖。我们这里只依赖Express。...3) get_img_list 这个接口用来返回漫画的具体章节的图片的URL，用户需要输入漫画名(cartoon)和章节名(chapter)。注意要修改自己的HOST的地址。...懒加载有一点需要注意，在漫画图片的页面中，通常会出现大量的图片，如果只是简单的使用 img 标签的话，可能会导致浏览器同时加载所有的图片，如果网速不好的话，我们的体验也会相当的差（局域网请无视）。

2.4K2 0

Node

); }) }); 2.2.3 响应图片 <!.../img/03.jpg',function(error,html_data){ response.end(html_data); }) } } 2.2.4...audit, bin, bugs, c, cache, ci, cit, completion, config, create, ddp, dedupe, deprecate, dist-tag...'); let server=new Koa(); server.listen(8080); let router=new Router(); //路由传参 :字段想传多少传多少 //也可以...字段=值方式传值，只不过获取方式不同 router.get('/news/:id/', async (ctx, next)=>{ let {id}=ctx.params; // :字段方式传参的数据在

10.6K3 1

什么是跨域？解决方案有哪些？

中间件代理跨域 9、 WebSocket协议跨域一、通过jsonp跨域通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源...三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。...上面三个场景的跨域数据传递用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify...origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。...user=admin', true); xhr.send(); 2）中间件服务器： var express = require('express'); var proxy = require('http-proxy-middleware

15.1K3 2

express + multer 文件上传入门

写在前面的在web开发中，我们经常会遇到图片上传的功能，接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传开始敲代码首先利用express-generator...至此，我们的express框架已经搭建完成 ?...DOCTYPE html> 图片上传： ...我们发现这不就是我们上传的文件吗，可是难道我们必须手动更改吗不要忘了nodejs很轻易就可以对本地文件进行操作利用fs模块可以轻松实现这点在routers中的index.js我们接着更改引入

1.4K2 0

JS跨域请求解决方案

.等dom标签，还有样式中background:url().@font-face()等文件外链 3.)...中间件代理跨域 WebSocket协议跨域 (1) 通过jsonp跨域通常为了减轻web服务器的负载，我们把js.css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源...:none;"> var iframe = document.getElementById('iframe'); // 向b.html传hash值...上面三个场景的跨域数据传递用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify...origin：协议+主机+端口号，也可以设置为”*”，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/“。

5.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

相关·内容

Nodejs开发框架Express3.0开发手记–从零开始

arkTS开发鸿蒙OS个人商城案例【2024最新新年限定开发案例QAQ】

mongoDB从入门到实战全套小白教程

在线考试系统（vue2 + elementui + express4 + MongoDB）

Node.js基于Express框架搭建一个简单的注册登录Web功能

不容错过的 Node.js 项目架构

基于arkTS开发鸿蒙app应用案例——大学生签到系统

Nuxt + Koa2 + Mongodb 手撸一个网上商城

Nuxt + Koa2 + Mongodb 手撸一个网上商城

最新HTML5学习路线整合

原生 JavaScript + NodeJS(Express 框架) 做一个简陋的登录注册项目

深入浅出mongodb(一)

基于 Express 应用框架的技术方案选型浅谈

Node.js 开发实践，前端工程师的 MVP 利器

前端开发者不得不知道的18个常用的网站

简易漫画网站搭建-漫画喵Server版

Node

什么是跨域？解决方案有哪些？

express + multer 文件上传入门

JS跨域请求解决方案

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐