gpt4 book ai didi

javascript - 在 HTML + Nodejs 中显示图像

转载 作者:数据小太阳 更新时间:2023-10-29 05:44:21 28 4
gpt4 key购买 nike

我是 nodejs 的新手。我想创建一个非常简单的网站,它有 3 个页面。我想在每个页面中显示图像以使页面看起来统一。

我的代码是这样的:

    /**
* Module dependencies.
*/

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var fs = require('fs');
var mail = require("nodemailer").mail;

/*List of variables*/

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.get('/main', function(req, res) {

fs.readFile('./home.html', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});

});

/* After this I have code for post event - all these navigation works perfectly fine*/

home.html 文件中我有一张图片要显示:

/*Header part of HTML file*/

<body>

<img class="logo" src="./Heading.png" alt="My_Logo">
console.log (src);
<h1 class="center">Welcome to message reprocessing</h1>
</br>
</body>

我的浏览器中没有显示此图像。当我检查控制台时出现此错误:

GET http://localhost:3000/Heading.png 404 (Not Found) 

求助,谢谢

最佳答案

首先,您必须在 server.js 文件下将公共(public)(文件夹)设置为静态

server.js

// configure our application
const Express = require('express');
const app = new Express();
.......
.......
app.use(Express.static(__dirname+'/public'));
.......

那么你的 img 源将是

<img class="logo" src="/images/Heading.png" alt="My_Logo">

这里的文件夹结构是 -

 project(root folder) \ public \ images\ Heading.png

关于javascript - 在 HTML + Nodejs 中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21235696/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com