1

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.

2
  • Intenta con <img src="img/logo.png" alt="logo"> (sin la barra inicial) Commented el 31 dic. 2021 a las 16:54
  • Y no se ve a las claras, pero si la organización es como describes entonces <img src="../public/img/logo.png" alt="logo"> también puede ser factible. Commented el 31 dic. 2021 a las 16:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.