Question

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

请帮忙，谢谢

Answer 1

感谢您的回答。我尝试过使用绝对路径而没有运气。但是我的一位朋友建议如下：

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

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

谢谢大家。

Answer 2

好的，它不是用express.js，但这里是我的代码片段，处理图像和外部javascripts，但有一个保护：

function handler (req, res){
var pathname = url.parse(req.url).pathname;
var isImage = 0, contentType, fileToLoad;
var extension = pathname.split('.').pop();
var file = "." + pathname;
var dirs = pathname.split('/');
if(pathname == "/"){
    file = "index.html";
    contentType = 'text/html';
    isImage = 2;
}
else if(dirs[1] != "hidden" && pathname != "/app.js"){
    switch(extension){
        case "jpg":
            contentType = 'image/jpg';
            isImage = 1;
            break;
        case "png":
            contentType = 'image/png';
            isImage = 1;
            break;
        case "js":
            contentType = 'text/javascript';
            isImage = 2;
            break;
        case "css":
            contentType = 'text/css';
            isImage = 2;
            break;
        case "html":
            contentType = 'text/html';
            isImage = 2;
            break;
    }
}
if(isImage == 1){
    fileToLoad = fs.readFileSync(file);
    res.writeHead(200, {'Content-Type':  contentType });
    res.end(fileToLoad, 'binary');
}
else if(isImage == 2){
    fileToLoad = fs.readFileSync(file, "utf8");
    res.writeHead(200, {'Content-Type':  contentType });
    res.write(fileToLoad);
    res.end();
}

假设您的root用户拥有app.js和index.html，可以使用/ css，/ img，/ js等文件夹。但是/ hidden文件夹中的app.js和内容无法到达，但根目录中的文件仍可访问。

Answer 3

如果您想要快速解决方案，请执行以下操作：而不是使用此<img class="logo" src="./Heading.png" alt="My_Logo">：

<img class="logo" src="your file path /Heading.png" alt="My_Logo">

仍然无法使用？检查图像拼写，文件扩展名（png），因为实时服务器中的png和PNG不同（区分大小写）。并验证

path.join(__dirname, 'public')

太

Answer 4

首先，在server.js中将public（文件夹）设置为静态

server.js

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

然后创建您的html文件

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

您的图像路径位置-

项目（根文件夹）\ public \ images \ Heading.png

Answer 5

Index.js 在此文件内，添加以下代码，以根据您的实际目录路径将目录名称赋予index.js（服务器）。

<div id="main-content">
  <img src="img\navthome" />
</div>

目录结构

现在在Index.ejs（您的HTML页面）内部，添加以下代码以插入您的图像并使之可见。

{{1}}

在IMG标签中，我们将SRC设置为“ img \ navthome.gif”，由于我们已经声明了__dirname和index.js中的PUBLIC文件夹，因此这里不需要声明所有路径

我希望它可以帮助您解决问题：D

在HTML + Nodejs中显示图像

5 个答案: