快捷導(dǎo)航

node.js如何根據(jù)URL返回指定的圖片詳解

更新時(shí)間：2020年10月21日 08:40:31 作者：Chamberlain99

這篇文章主要介紹了NODE.JS如何根據(jù)URL返回指定的圖片詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

學(xué)node的過程碰到的一些坑,當(dāng)時(shí)以為只需將圖片放在html頁面指定的路徑下，訪問該頁面時(shí)，圖片也會獲取到，但是現(xiàn)在想來，或許是服務(wù)器只提供這個(gè)html的文件，交由客戶端的瀏覽器編譯，但是在客戶端里并不存在該圖片文件，所以圖片自然無法獲取到。在看其他頁面的源代碼后，發(fā)現(xiàn)，他們的圖片路徑都是通過訪問網(wǎng)絡(luò)資源得到的，所以說，圖片也應(yīng)屬于網(wǎng)絡(luò)資源，而不是這樣：

代碼便不是如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <img src="img/NAROTA.jpg"/>
  </body>
</html>

那么怎么設(shè)置網(wǎng)絡(luò)資源呢，比如一張png格式的圖片,我們需要知道，網(wǎng)絡(luò)資源首先放在我們的服務(wù)器，所以我們的node.js服務(wù)器中應(yīng)該在客戶端訪問這張圖片時(shí)讀取這張圖片，然后再返回給客戶端，下面我們直接貼出代碼，這個(gè)是我自己瞎捉摸的，我目前也不知道主流的做法是怎么樣的，但是還是優(yōu)化了一下url的解析：

var http=require("http");
var fs=require("fs");
var url=require("url");
//創(chuàng)建一個(gè)server的實(shí)例
var server=http.createServer(function(req,res){
var pathname=url.parse(req.url).pathname;
//當(dāng)url的ip加端口號的后1到7位為img/png時(shí)，返回以該路徑下對應(yīng)的png圖片
if(pathname.substring(1,8)==='img/png'){
    fs.readFile(pathname.substring(1),function(err,data){
    res.writeHead(200,{'Content-Type':'image/png'});
    res.end(data);
  });
}
//jpg同上
if(pathname.substring(1,8)==='img/jpg'){
    fs.readFile(pathname.substring(1),function(err,data){
    res.writeHead(200,{'Content-Type':'image/jpeg'});
    res.end(data);
  });
  }
}).listen(3010);//監(jiān)聽在3010端口 
console.log('服務(wù)器已開啟......');

主要是如何解析url，比如我要訪問127.0.0.1:3010這個(gè)ip加端口的服務(wù)器，其目錄下的img/png的warn.png這張圖片，在上述代碼中，我就只需訪問127.0.0.1:3010/img/png/warn.png ,效果如下：