express.static wird nur in index.html geladen

Question

Ich versuche, die statischen Dateien (Bilder, js, css), die alle im öffentlichen Ordner sind, für alle meine Routen verfügbar zu machen. Ich bin in der Lage, sie nur auf die index.html zu laden. Die Dateien in manage ment.html haben keinen Zugriff auf die statischen Dateien. Ich erhalte einen 404-Fehler in der Chrome-Konsole.

Ordnerstruktur:

-app/ 
---index.html 
---management.html 
---public/ 
------css/ 
------js/ 
------img/ 

server.js:

const express = require('express'); 
const path = require('path'); 

var app = express(); 

app.use(express.static(path.join(__dirname, 'public'))); 

app.get('/', function(req, res) { 
    res.sendFile('index.html', {root: __dirname }) 
}); 

app.get('/management', function(req, res) { 
    res.sendFile('management.html', {root: __dirname }) 
}); 

app.listen(3000); 

Answer 1

In Ihrem HTML-Dateien, die Sie beziehen sich wahrscheinlich auf die relativen Pfade der statischen Dateien. Zum Beispiel: <img src="img/example.png">. Dieser Link basiert auf Ihrem aktuellen Standort.

Wenn Ihr aktueller Standort http://example.com/ (index.html) ist, wird es sich auf http://example.com/img/example.png beziehen, wo sich die Datei wahrscheinlich befindet.

Aber wenn Ihr Standort http://example.com/management (management.html) ist, bezieht er sich auf http://example.com/management/img/example.png, die eine 404.

Mit dem absoluten Pfad der Datei, wird dieses Problem lösen zurückkehren wird. Sie können dies tun, indem Sie einen / vor den relativen Pfad setzen: <img src="/img/example.png">. Alternativ könnten Sie einen relativen Pfad in management.html wie folgt verwenden: <img src="../img/example.png">.