Bla*_*wis 4 html javascript ejs node.js express
我正在为一个项目构建我的视图，但在我的 .ejs 页面上渲染图像时遇到了麻烦。当页面加载时，我在 ejs 文件中设置的替代文本旁边只有一个小页面图标。我还在控制台中收到“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
});
此外，这是我为该项目设置的目录，以便您可以查看我的所有文件所在的位置：
改变
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”提供服务，但示例中的 uris 不包括“public”。
将路径作为参数添加到任何.use挂载给定路径下的中间件。
--- 编辑以支持未在 /public/images 下提供的 favicon.ico
您也可以更新您正在使用的目录结构；
app.use(express.static('/path/to/content'));
其中/path/to/content包含
/
|-> favicon.ico
|-> public/
|-> images/
|-> x.png
|-> y.png
所以请记住 express.static 服务于您通过它的路径内的任何内容，在它安装的路径上（默认为“/”）。它读取的路径与 uri 无关，但里面的目录结构有影响
| 归档时间： |
|
| 查看次数： |
5940 次 |
| 最近记录： |