Estoy haciendo una simple API REST, con autenticación, sesiones y base de datos para usuarios. El problema es que estoy tratando de agregar una imagen pero no la carga, y me llega un mensaje de 404 mediante morgan.
La estructura del codigo es la siguiente:
- src: con el servidor(app.js), y las carpetas: public, views y routes.
- public: con la carpeta img donde se encuentra el logo.png
- views: con las plantillas ejs, siendo la principal main.ejs
- routes: con el archivo index.js
app.js
const express = require('express');
const session = require('express-session');
const flash = require('connect-flash');
const passport = require('passport');
const engine = require('ejs-mate');
const path = require('path');
const morgan = require('morgan');
//Initializing
const app = express();
require('./database');
require('./passport/user-auth');
//Settings
app.use(express.static('public'));
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.engine('ejs', engine);
app.set('view engine', 'ejs');
//Middlewares
app.use(morgan('dev'));
app.use(express.urlencoded({extended:false}));
app.use(session({
secret: 'I miss me spider',
resave: false,
saveUninitialized: false
}))
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
//middleware to save the message into locals to use in ejs
app.use((req,res,next) => {
res.locals.loginMessage = req.flash('loginMessage');
res.locals.registerMessage = req.flash('registerMessage');
res.locals.user = req.user;
next();
});
//Routes
app.use('/', require('./routes/index'));
//Server listings
app.listen(app.get('port'), () => {
console.log('Server listing at port ', app.get('port'));
})
index.js
const router = require('express').Router();
const passport = require('passport');
router.get('/', (req,res) => {
res.redirect('/login');
});
router.get('/login', (req, res) => {
res.render('login');
});
router.post('/login', passport.authenticate('loginAuth', {
successRedirect: '/profile',
failureRedirect: '/login',
failureFlash: true,
successFlash: true
}));
router.get('/register', (req, res) => {
res.render('register');
});
router.get('/logout', (req,res) => {
req.logOut();
res.redirect('/');
});
router.post('/register', passport.authenticate('registerAuth', {
successRedirect: '/profile',
failureRedirect: '/register',
failureFlash: true,
successFlash: true
}));
router.get('/profile', checkAuthentication, (req,res) => {
res.render('profile');
});
function checkAuthentication(req, res, next){
if(req.isAuthenticated()){
return next();
}
res.redirect('/');
}
module.exports = router;
main.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Login APP</title>
</head>
<body>
<div class="container">
<img src="/img/logo.png" alt="logo">
</div>
<%- body %>
<!-- JS BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
El problema esta en que cuando entro a la pagina no me renderiza la imagen y me aparece su texto alternativo unicamente.