在 HTML Nodejs 中显示图像

新手上路,请多包涵

我是 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)

请帮助,谢谢

原文由 DivB 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 305
2 个回答

感谢您的回答。我已经尝试过使用绝对路径,但没有成功。但是我的一位朋友建议如下:

 <img class="logo" src="http://localhost:3000/images/Heading.png" alt="My_Logo">

并将 Heading.png 文件保存在 public/images 目录中。

谢谢大家。

原文由 DivB 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

原文由 Soura Ghosh 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏