如何在nodeJS中获取多个图像?

时间:2018-03-06 12:06:48

标签: html node.js

所以,问题是我在HTML代码中可以看到两个jpg图像。但只有download.jpg显示的不是lenovo.jpg,但两者都显示在req.url中 附加控制台图像并附加输出。

HTML output

Console ScreenShot

  

这是我的js文件

//creating web server
var http = require('http');
var fs = require('fs');     
var path = require('path');
 http.createServer(function(req,res){   

    if(req.url === "/"){        
        fs.readFile('./public/index.html',"UTF-8", function(err,html){
            res.writeHead(200,{'content-type': 'text/html'});
            res.end(html);
        });
    }
    else if(req.url.match("\.css$")){
        var cssPath = path.join(__dirname, '/public', req.url);
        var fileStream = fs.createReadStream(cssPath, "UTF-8");
        res.writeHead(200, {'content-type': 'text/css'});
        fileStream.pipe(res);
    }
    else if(req.url.match("\.jpg$")){
        var imagePath = path.join(__dirname,'/public',req.url);
        var fileStream = fs.createReadStream(imagePath);
        res.writeHead(200,{'content-type': 'image/jpg'});
        fileStream.pipe(res);
    }
    console.log(req.url);
 }).listen(3000);
  

我的Html

<!DOCTYPE html>
<html>
<head>
    <!-- <meta charset="utf-8"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My HTML Page</title>
    <link rel="stylesheet" type="text/css" href="./css/base.css">
</head>
<body>
    <h1> My First Heading From the Page of html </h1>
    <img src="./images/download.jpg">
    <img src="./images/lenovo.jpg">
</body>
</html>

2 个答案:

答案 0 :(得分:0)

如果您没有严格要求不使用快递,我建议您使用快递,并且您可以使用快递处理它。静态文件处理方法: https://expressjs.com/en/starter/static-files.html

答案 1 :(得分:0)

查看lenovo.jpg图像的大小,它具有非常高的分辨率,请使用低分辨率或在img标签中定义宽度和高度。