图像未使用express和ejs渲染

问题描述 投票:0回答:1

我对 ejs 不是很熟悉,我正在做一个使用它的实践项目。它以某种方式呈现除图像之外的所有内容。它使用来自快速会话的图像,但我什至尝试用确切的网址替换它,但它仍然不起作用。

这是app.js文件

//Imports
const path = require("path");
require("dotenv").config();
const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const partials = require('express-partials');
const app = express();
const session = require('express-session');
const passport = require('./config/passport.js');

//Variables
const PORT = 3000;
const EXPRESS_SESSION_SECRET = process.env.EXPRESS_SESSION_SECRET;

//Remove after development to minimize unnecessary realtime logs on server
app.use(morgan('tiny'));

//Express setup
app.use(express.json());
app.use(helmet());
app.disable('x-powered-by');

//Express page setup
app.set('views', path.join(__dirname + '/views'));
app.set('view engine', 'ejs');
app.use(partials());
app.use(express.static(path.join(__dirname + '/public')));

//Express session set up to be used on all routes
app.use(
  session({
    secret: EXPRESS_SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
    cookie: { maxAge: 1000 * 60 *60 * 24 }
  })
);

//Initializes passport to be used on all routes
app.use(passport.initialize());
app.use(passport.session());


//Mounts the page router
const pageRouter = require('./routers/page-router.js');
app.use('/', pageRouter);

//Mounts the api router
const apiRouter = require('./routers/api-router.js');
app.use('/api', apiRouter);

//Starts server
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

这是路由器中的路由,到 /account 的 GET 路由是我们感兴趣的一个

//Imports necessary modules
const express = require('express');
const {ensureAuthenticated} = require('../middleware/auth-middleware.js');

//Creates the router
const pageRouter = express.Router();

//This page is protected and requires github authentication
pageRouter.get('/account', ensureAuthenticated, (req, res) => {
    res.render('account', { user: req.user });
});

//Exports the router
module.exports = pageRouter;

最后是位于views 文件夹中的ejs 文件。所有其他数据(例如名称和链接)都正确填充,即使使用实际的 url,我也无法获取要渲染的图像

<div class="row">
  <div class="six columns">
    <h1><%= user.username %></h1>
    <p>ID: <%= user.id %></p>
    <p>Name: <%= user.displayName %></p>
    <p>Bio: <%= user._json.bio %></p>
    <p>GitHub: <a href="<%= user._json.html_url %>">Link</a></p>
  </div>

  <div class="six columns">
    <img src="<%= user.photos[0].value %>" alt="Avatar">
  </div>
</div>

任何帮助或指导都将非常感激,提前致谢!

编辑:

这里是源代码中的 html,它看起来有效并且可以单独工作。我不知道为什么它在我的应用程序提供服务时无法正确呈现。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Codecademy OAuth Project</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/skeleton.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container">

            <nav>
                
                    <div>
                        <a href="/">Home</a> | 
                        <a href="/account">Account</a> | 
                        <a href="/logout">Log Out</a>
                    </div>
                
                </nav>
        <div class="row">
  <div class="six columns">
    <h1>brendengerber</h1>
    <p>Name: </p>
    <p>Bio: </p>
    <p>GitHub: <a href="https://github.com/brendengerber">Link</a></p>
  </div>

  <div class="six columns">
    <img src="https://avatars.githubusercontent.com/u/10082638?v=4" alt="Avatar">
  </div>
</div>
        </div>
    </body>
</html>

node.js express ejs
1个回答
-1
投票

首先,检查用户obj是否存在。

然后,检查用户 obj 键。

© www.soinside.com 2019 - 2024. All rights reserved.