javascript - 如何使用node js在前端显示modgodb中存储的图像URL路径

标签 javascript node.js express ejs

我已成功存储上传图片的图片路径。它们看起来像这样 http://localhost/public/Images/okro.jpg 但我不知道如何从数据库中获取它们并将它们显示在前端。

有没有办法获取所有图像路径并将它们显示在前端?

我使用 Express 框架和 Ejs 作为我的 View 引擎。

编辑

请求的 server.js 代码。

var express = require("express"); 
var app = express (); 
var port = process.env.PORT || 5000; 
var bodyParser= require('body-parser');
var mongoose = require('mongoose'); 
var schema = mongoose.Schema; 
var passport = require('passport'); 
var expressValidator = require('express-validator'); 
var flash = require('connect-flash');  
var session = require('express-session'); 
var cookieParser = require('cookie-parser');
var morgan = require('morgan');
var configDB = require('./config/db.js');
var multer = require('multer'); 
var crypt  = require('crypto'); 
var static = require('express-static'); 
//var upload = multer({ dest: 'public/Images/' })



//connect to mlab database
mongoose.connect(configDB.url); 




// log every request to the console
app.use(morgan('combined')); 

//read cookies (needed for auth)
app.use(cookieParser());

// get information from html forms
app.use(bodyParser()); 

//required for passport
app.use(session({ secret: 'ilovescotchscotchyscotchscotch' }));

app.use(passport.initialize());

// persistent login sessions
app.use(passport.session()); 

//connect-flash for displaying messages. 
app.use(flash()); 



// load our routes.  
require('./config/router.js')(app, passport); 


require('./config/passport.js')(passport); 


require('./config/upload.js')(app, crypt); 


//upload meme 
//require ('./config/upload.js'); 

// set up ejs for templating
app.set('views', __dirname + '/views');     
app.set('view engine', 'ejs'); 
app.use(static(__dirname));

app.use(static(__dirname + 'Images'));


//app.use(static(__dirname + '/public'));

//app.use(static('/public'))

//app.use('public/Images', express.static('public'))

//app.use(express.directory(__dirname + '/public'));

//setting up multer
//app.use(multer()); 


//launch the app

app.listen(port); 

console.log('The magic happens on port ' + port); 

structure of my database

最佳答案

看起来您正在使用Images作为静态文件夹。所以你的 mongoDB 中只有图片的名称。 例如:

"meme": {
  "imgs": "meme.jpg"
}

在您的 route :

app.get('/', function (req, result) {
  const query = Meme.findOne({});
  query.select('meme');
  query.exec(function (err, meme) {
    if (err) return handleError(err);
    result.render('/index', {
      path: meme.meme.imgs
    });
  }
}

在 .ejs 文件中,您可以使用:

<img src=<%= path %> alt="image">

关于javascript - 如何使用node js在前端显示modgodb中存储的图像URL路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48779730/

相关文章:

node.js - 我的 Node.js 本地应用程序无法连接到 Azure SQL DB

javascript - 当参数作为对象发送时,为什么 Node 服务器不读取 React 中的 axios post ?

javascript - Angular Material - 不工作/渲染没有特定类

node.js - 你没有跑

mysql - 我如何同步调用 google-bigquery 删除和插入 API?

node.js - NodeJS - 如何异步读取多个文件并将读取的内容写入一个文件

javascript - 克隆模板时如何更改内部 div?

javascript - 无法批量设置类的背景颜色

node.js - 从 Node.JS/Express.JS 读取时,IronMQ 从推送队列清空消息正文

Node.js 快速应用程序缓存/页面加载缓慢(swig 模板引擎)