ExpressJS - Statische Dateien bereitstellen

Statische Dateien sind Dateien, die Clients so herunterladen, wie sie vom Server sind. Erstellen Sie ein neues Verzeichnis,public. Express erlaubt Ihnen standardmäßig nicht, statische Dateien bereitzustellen. Sie müssen es mit der folgenden integrierten Middleware aktivieren.

app.use(express.static('public'));

Note - Express sucht die Dateien relativ zum statischen Verzeichnis, sodass der Name des statischen Verzeichnisses nicht Teil der URL ist.

Beachten Sie, dass die Root-Route jetzt auf Ihr öffentliches Verzeichnis festgelegt ist, sodass alle statischen Dateien, die Sie laden, public als root betrachten. Um zu testen, ob dies einwandfrei funktioniert, fügen Sie eine beliebige Bilddatei in Ihre neue einpublic dir und ändere seinen Namen in "testimage.jpg". Erstellen Sie in Ihren Ansichten eine neue Ansicht und fügen Sie diese Datei wie folgt hinzu:

html
   head
   body
      h3 Testing static file serving:
      img(src = "/testimage.jpg", alt = "Testing Image

Sie sollten die folgende Ausgabe erhalten -

Mehrere statische Verzeichnisse

Mit dem folgenden Programm können wir auch mehrere Verzeichnisse für statische Assets festlegen:

var express = require('express');
var app = express();

app.use(express.static('public'));
app.use(express.static('images'));

app.listen(3000);

Präfix für den virtuellen Pfad

Wir können auch ein Pfadpräfix für die Bereitstellung statischer Dateien bereitstellen. Zum Beispiel, wenn Sie ein Pfadpräfix wie angeben möchten'/static'müssen Sie den folgenden Code in Ihre index.js Datei -

var express = require('express');
var app = express();

app.use('/static', express.static('public'));

app.listen(3000);

Wenn Sie jetzt eine Datei einfügen müssen, z. B. eine Skriptdatei mit dem Namen main.js, die sich in Ihrem öffentlichen Verzeichnis befindet, verwenden Sie das folgende Skript-Tag:

<script src = "/static/main.js" />

Diese Technik kann nützlich sein, wenn mehrere Verzeichnisse als statische Dateien bereitgestellt werden. Diese Präfixe können dabei helfen, zwischen mehreren Verzeichnissen zu unterscheiden.