ExpressJS - Obsługa plików statycznych

Pliki statyczne to pliki, które klienci pobierają w postaci, w jakiej są z serwera. Utwórz nowy katalog,public. Express, domyślnie nie pozwala na obsługę plików statycznych. Musisz go włączyć za pomocą następującego wbudowanego oprogramowania pośredniego.

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

Note - Express wyszukuje pliki w odniesieniu do katalogu statycznego, więc nazwa katalogu statycznego nie jest częścią adresu URL.

Zwróć uwagę, że trasa główna jest teraz ustawiona na twój katalog publiczny, więc wszystkie ładowane pliki statyczne będą traktowane jako publiczne jako root. Aby sprawdzić, czy to działa dobrze, dodaj dowolny plik obrazu w nowympublic dir i zmień jego nazwę na „testimage.jpg”. W swoich widokach utwórz nowy widok i dołącz ten plik, np. -

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

Powinieneś otrzymać następujące dane wyjściowe -

Wiele statycznych katalogów

Możemy również ustawić wiele katalogów zasobów statycznych za pomocą następującego programu -

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

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

app.listen(3000);

Wirtualny prefiks ścieżki

Możemy również podać prefiks ścieżki do obsługi plików statycznych. Na przykład, jeśli chcesz podać prefiks ścieżki, taki jak'/static', musisz dołączyć następujący kod do pliku index.js plik -

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

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

app.listen(3000);

Teraz, gdy potrzebujesz dołączyć plik, na przykład plik skryptu o nazwie main.js znajdujący się w katalogu publicznym, użyj następującego tagu script -

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

Ta technika może się przydać w przypadku udostępniania wielu katalogów jako plików statycznych. Te przedrostki mogą pomóc w rozróżnieniu wielu katalogów.