使用Node.js、Express和EJS无法显示图片

Question

使用Node.js、Express和EJS无法显示图片

4

我正在构建一个项目的视图，在我的.ejs页面上渲染图片时遇到了一些问题。当页面加载时，在ejs文件中设置的alt文本旁边只有一个小的页面图标。控制台中还会出现“GET /public/images/ResConnect.png 404”错误。我尝试了一些在线解决方案，但似乎没有什么作用。这是我尝试在特定页面上呈现徽标的代码：

<!-- views/index.ejs -->
    <!doctype html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <html>
    <head>
        <title>ResConnect Home</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script> <!-- load fontawesome -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
        <style>
            body        { padding-top:80px; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="jumbotron text-center">
                <img src="./public/images/ResConnect.png" alt="ResConnect Logo"/>
                <h1><span class="fa fa-lock"></span> ResConnect Home</h1>
                <p>Please advise: Only approved personnel by The University of Mississippi Department of Student Housing may access ResConnect.</p>

                <b>Login or Register with:</b><br>

                <a href="/login" class="btn btn-default"><span class="fa fa-user"></span> Login</a>
                <a href="/signup" class="btn btn-default"><span class="fa fa-user-plus"></span> Register</a>
            </div>
        </div>
    </body>
    </html>

以下是我的server.js文件:

// server.js

// get all the tools we need
var express  = require('express');
var session  = require('express-session');
var favicon = require('express-favicon');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var morgan = require('morgan');
var app      = express();
var port     = process.env.PORT || 1848;

var passport = require('passport');
var flash    = require('connect-flash');


require('./config/passport')(passport); // pass passport for configuration

app.use(favicon(__dirname + './public/images/favicon.ico'));
app.use(express.static('./public/images'));

// set up our express application
app.use(morgan('dev')); // log every request to the console
app.use(cookieParser()); // read cookies (needed for auth)
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

app.set('view engine', 'ejs'); // set up ejs for templating

// required for passport
app.use(session({
    secret: 'vidyapathaisalwaysrunning',
    resave: true,
    saveUninitialized: true
 } )); // session secret

app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session


require('./app/routes.js')(app, passport); 

app.listen(port);
console.log('Server running on port ' + port);

这是我用于渲染index.ejs页面的get函数：

app.get('/', function(req, res) {
    res.render('index.ejs'); // load the index.ejs file
});

此外，以下是我项目的目录设置，您可以看到我的所有文件所在位置：项目文件目录

- Blake Lewis

也许你需要在 HTML 中使用 /public 而不是 ./public？编辑：我没有仔细阅读。express.static 没有将 public/images 视为它提供的文件的 uri 的一部分。 - Catalyst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Catalyst · Accepted Answer

改变

app.use(express.static('./public/images'));

成为

app.use('/public/images/', express.static('./public/images'));

你需要使用express从./public/images文件系统中提供文件，但是你需要从/public/images uri下提供这些文件（而不仅仅是“/”）。

例如在http://expressjs.com/en/starter/static-files.html中，请注意静态中间件是从“public”中提供的，但示例中的uri不包括“public”。

将路径作为参数添加到任何.use中会将中间件挂载在给定路径下。

--- 编辑以支持favicon.ico不在/public/images下提供

或者你可以更新你正在使用的目录结构；

app.use(express.static('/path/to/content'));

其中/path/to/content包含

 /
 |-> favicon.ico
 |-> public/
     |-> images/
         |-> x.png
         |-> y.png

请记住，express.static服务于您传递给它的路径内的所有内容，在其挂载的路由上（默认为“/”）。它从读取的路径对URI没有影响，但是其中的目录结构会产生影响。