node.js - サーバ上のページに複数の画像を送る方法

Question

htmlと一緒にnode.jsサーバ上のページに画像を送るには？イメージを送信するためにexpress staticを使用するにはどうすればよいですか？

サーバー側（ここでは例が必要） - ウェブサーバで>

app.get('/', function (req, res) { 
    res.sendFile(__dirname + '/login.html'); 
}); 

app.post('/m', function (req, res) { 

    res.sendFile(__dirname + '/m/a.png'); 
    res.sendFile(__dirname + '/m/b.png'); 
    res.sendFile(__dirname + '/m/c.png') 
    res.sendFile(__dirname + '/m/d.html'); 
}); 

Answer 1

を、あなただけのページに複数の画像を送信しません。代わりに、ブラウザはページのHTMLを要求し、解析し、HTMLの<img>タグを見つけて、それぞれの画像を別々に要求し、Webサーバーは要求された画像を送信してそれぞれの個別の画像要求に応答します。

すべての画像を共通のフォルダに入れた場合は、express.static()を使用して、1行のコードですべての画像要求を処理できます。たとえば、次のようなコードの行：

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

は、このようなURLのためのすべての画像の要求にサービスを提供します：

/image/a.png 
/image/b.png 

__dirname以下「公共」のサブディレクトリ内の一致a.pngとb.pngを見つけることによって、 （これはスクリプトのディレクトリです）。 express.static()hereについて詳しく読むことができます。明らかに、使用したいURLのパスとイメージが見つかるパスで再生できます。 2つは一緒に働かなければならないので、express.static()はあなたが置いたサーバーのハードドライブの対応する場所に正しいイメージを見つけることができます。

app.use()とexpress.static()の別々のパスコンポーネントがどのように連携して動作するかを理解するには、しばしば混乱があります。上記の例では、"/image"はリクエストURLの一部になります。このapp.use("/image", ...)は、この特定のミドルウェアを/imageで始まるリクエストパスに適用するように指定しています。

その後path.join(__dirname, "public")は/image後にURLパスの残りの部分を取るとサブフォルダのディレクトリ__dirname以下publicで、そのために見てexpress.static()を語っています。ブラウザが/image/a.pngを、要求したのであれば、app.use()文は/imageために一致していることをURLをトリガし、その後express.static()は、あなたが見て、それを告げたディレクトリにパスa.pngの残りの部分を見つけようとします。

をサーバー上のハードディスク、これは次のようになります。

/myproject/ 
    app.js 
    login.html 
    /public 
     a.png 
     b.png 

それはあなたがコードしている方法ですので、私は唯一のapp.jsと同じディレクトリにlogin.htmlとを示してきた現在書かれているように見えます。私は個人的に私のサーバスクリプトと同じディレクトリにパブリックファイルを置かないのは間違いを起こさず、誤って私のサーバファイルを公開しておきたいからです。

私は、より典型的には、このようにそれを行うだろう：

/myproject/ 
    app.js 
    /public 
     login.html 
     a.png 
     b.png 

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

app.get('/', function (req, res) { 
    res.sendFile(path.join(__dirname, "public", "login.html")); 
}); 

それとも、ただexpress.static()があまりにもlogin.htmlとファイルを提供しましょう。