1. 程式人生 > 程式設計 >node.js如何根據URL返回指定的圖片詳解

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

學node的過程碰到的一些坑,當時以為只需將圖片放在html頁面指定的路徑下,訪問該頁面時,圖片也會獲取到,但是現在想來,或許是伺服器只提供這個html的檔案,交由客戶端的瀏覽器編譯,但是在客戶端裡並不存在該圖片檔案,所以圖片自然無法獲取到。在看其他頁面的原始碼後,發現,他們的圖片路徑都是通過訪問網路資源得到的,所以說,圖片也應屬於網路資源,而不是這樣:

程式碼便不是如下所示:

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

那麼怎麼設定網路資源呢,比如一張png格式的圖片,我們需要知道,網路資源首先放在我們的伺服器,所以我們的node.js伺服器中應該在客戶端訪問這張圖片時讀取這張圖片,然後再返回給客戶端,下面我們直接貼出程式碼,這個是我自己瞎捉摸的,我目前也不知道主流的做法是怎麼樣的,但是還是優化了一下url的解析:

var http=require("http");
var fs=require("fs");
var url=require("url");
//建立一個server的例項
var server=http.createServer(function(req,res){
var pathname=url.parse(req.url).pathname;
//當url的ip加埠號的後1到7位為img/png時,返回以該路徑下對應的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),{'Content-Type':'image/jpeg'});
    res.end(data);
  });
  }
}).listen(3010);//監聽在3010埠 
console.log('伺服器已開啟......');

主要是如何解析url,比如我要訪問127.0.0.1:3010這個ip加埠的伺服器,其目錄下的img/png的warn.png這張圖片,在上述程式碼中,我就只需訪問127.0.0.1:3010/img/png/warn.png,效果如下:

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

具體思路是,將url中的img/png/xxx.png解析出來作為我們讀取圖片的引數,這樣做得好處是隻需一條判斷語句即可處理所有的png型別的圖片。

在node.js中,可以通過writeHead() 方法寫頭,表明該檔案的型別,可以將大部分的檔案型別設定為網路資源。
下面是一些常用的HTTP Content-Type,希望對大家能有幫助:

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

總結

到此這篇關於node.js如何根據URL返回指定圖片的文章就介紹到這了,更多相關node.js根據URL返回圖片內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!