Javascript 以HTML格式显示图像+；Nodejs_Javascript_Node.js

Javascript 以HTML格式显示图像+；Nodejs

javascript node.js

Javascript 以HTML格式显示图像+；Nodejs,javascript,node.js,Javascript,Node.js,我对nodejs是新手。我想创建一个非常简单的网站，有3页。在每个页面中，我希望显示一个图像，使页面看起来统一我的代码如下所示： /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require

我对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>

请提供帮助，谢谢

如果您需要快速解决方案，请执行以下操作：使用以下方法代替此

：

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

太感谢你的回答了。我已经尝试过使用绝对路径了，但没有成功。然而，我的一位朋友建议如下：

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

并将

Heading.png

文件保存在

public/images

目录中

谢谢大家。

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

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();
}

这假设您的根目录中有app.js和index.html，您可以有/css、/img、/js等文件夹。但是/hidden文件夹中的app.js和内容无法访问，但根目录中的文件仍然可以访问

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

然后是你的html文件

您的图像路径位置-

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

Index.js 在这个文件中，添加下面的代码，以根据实际目录路径为index.js（服务器）指定目录名

app.use(express.static(path.join(__dirname, "/public")));

目录结构

现在在Index.ejs（您的HTML页面）中添加下面的代码以插入图像并使其可见

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

请注意，在IMG标记中，我们将SRC设置为“IMG\navthome.gif”，这里我们不需要声明所有路径，因为我们已经声明了_dirname和index.js中的公用文件夹

我希望它能帮助您解决您的问题：D

console.log（…）语句不会那样工作。。。您不能只将javascript添加到html中。它必须在标记中，并且必须以某种方式执行。另外，你能在这里发布你的目录布局吗？你确定你的公共目录中有Heading.png吗？

Heading.png

是否与

home.html

位于同一个文件夹中？如果你能用一个例子指定“你的文件路径”代表什么，那就太好了。它是本地主机基url还是仅仅是一个路径，这会有帮助的others@NelsonBwogora-为什么不从您的目录中检查它？

server.js

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

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

app.use(express.static(path.join(__dirname, "/public")));

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