[英]How to display image URL path stored in modgodb in the front end using node js
I have successfully stored the image path of the pictures uploaded. 我已经成功存储了上传图片的图像路径。 They look like this
http://localhost/public/Images/okro.jpg
but I don't know how to get them from the database and display them on the frontend. 它们看起来像
http://localhost/public/Images/okro.jpg
但我不知道如何从数据库中获取它们并在前端显示它们。
Is there a way where I can get all the image path and display them on the frontend? 有没有一种方法可以获取所有图像路径并将其显示在前端?
I use Express framework and Ejs as my view engine. 我使用Express框架和Ejs作为我的视图引擎。
EDIT 编辑
The server.js code as requested. 所请求的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);
It looks like you are using Images
as the static folder. 看来您是使用
Images
作为静态文件夹。 So you would have just the name of the picture in your mongoDB. 这样一来,您的mongoDB中将只有图片的名称。 Eg:
例如:
"meme": {
"imgs": "meme.jpg"
}
In your 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
});
}
}
In .ejs file, you would use: 在.ejs文件中,您将使用:
<img src=<%= path %> alt="image">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.