Express-js kann meine statischen Dateien nicht abrufen. Warum?

Ich habe meinen Code auf die einfachste Express-JS-App reduziert, die ich machen konnte:

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

Mein Verzeichnis sieht folgendermaßen aus:

static_file.js
/styles
  default.css

Beim Zugriff wird http://localhost:3001/styles/default.cssjedoch der folgende Fehler angezeigt:

Cannot GET / styles /
default.css

Ich benutze express 2.3.3und node 0.4.7. Was mache ich falsch?

Versuchen Sie es http://localhost:3001/default.css.

Um /stylesin Ihrer Anforderungs-URL zu haben, verwenden Sie:

app.use("/styles", express.static(__dirname + '/styles'));

Schauen Sie sich die Beispiele auf dieser Seite an :

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));

Ich habe das gleiche Problem. Ich habe das Problem mit folgendem Code behoben:

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

Beispiel für eine statische Anforderung:

http://pruebaexpress.lite.c9.io/js/socket.io.js

Ich brauche eine einfachere Lösung. Existiert es?

default.css sollte verfügbar sein bei http://localhost:3001/default.css

Das stylesIn app.use(express.static(__dirname + '/styles'));weist express nur an, im stylesVerzeichnis nach einer statischen Datei zu suchen, die bereitgestellt werden soll. Es ist dann nicht (verwirrend) Teil des Pfades, auf dem es verfügbar ist.

Diese Arbeit für mich:

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

In Ihrer server.js:

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

Sie haben Express und App separat deklariert, einen Ordner mit dem Namen "public" oder nach Belieben erstellt und können dennoch auf diesen Ordner zugreifen. In Ihrer Vorlage src haben Sie den relativen Pfad von / public (oder den Namen Ihres Ordnerschicksals zu statischen Dateien) hinzugefügt. Achten Sie auf die Bars auf den Routen.

Was für mich funktioniert hat ist:

Anstatt app.use(express.static(__dirname + 'public/images'));in Ihre app.js zu schreiben

Einfach schreiben app.use(express.static('public/images'));

dh entfernen Sie den Stammverzeichnisnamen im Pfad. Und dann können Sie den statischen Pfad effektiv in anderen js-Dateien verwenden. Zum Beispiel:

<img src="/images/misc/background.jpg">

Hoffe das hilft :)

Ich verwende Bootstrap CSS, JS und Fonts in meiner Anwendung. Ich habe einen Ordner namens assetroot im Verzeichnis der App erstellt und alle diese Ordner darin abgelegt. Dann in der Serverdatei folgende Zeile hinzugefügt:

app.use("/asset",express.static("asset"));

In dieser Zeile kann ich die Dateien, die sich im assetVerzeichnis befinden, über das /assetPfadpräfix wie folgt laden : http://localhost:3000/asset/css/bootstrap.min.css.

Jetzt kann ich in den Ansichten einfach CSS und JS wie folgt einfügen:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

Um statische Dateien (CSS, Bilder, JS-Dateien) bereitzustellen, sind nur zwei Schritte erforderlich:

1. Übergeben Sie das Verzeichnis der CSS-Dateien an die integrierte Middleware express.static

   var express = require('express');
   var app = express();
   /*public is folder in my project directory contains three folders
   css,image,js
   */
   //css  =>folder contains css file
   //image=>folder contains images
   //js   =>folder contains javascript files
   app.use(express.static( 'public/css'));

2. Um auf CSS-Dateien oder Bilder zuzugreifen, geben Sie einfach die URL http: // localhost: port / filename.css ein. Beispiel : http: // localhost: 8081 / bootstrap.css

Hinweis: Um CSS-Dateien mit HTML zu verknüpfen, geben Sie einfach ein<link href="file_name.css" rel="stylesheet">

wenn ich diesen Code schreibe

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

Um auf die statischen Dateien zuzugreifen, geben Sie einfach url: localhost: port / css / filename.css ein. Beispiel: http: // localhost: 8081 / css / bootstrap.css

Hinweis: Um CSS-Dateien mit HTML zu verknüpfen, fügen Sie einfach die folgende Zeile hinzu

<link href="css/file_name.css" rel="stylesheet">    

Dieser hat für mich gearbeitet

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

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

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

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

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

Versuchen Sie, mit http: // localhost: 3001 / default.css darauf zuzugreifen .

   app.use(express.static(__dirname + '/styles'));

Sie geben ihm tatsächlich den Namen eines Ordners, dh Stile, die nicht Ihrem Vorort entsprechen.

Ich finde meine CSS-Datei und füge eine Route hinzu:

app.get('/css/MyCSS.css', function(req, res){
  res.sendFile(__dirname + '/public/css/MyCSS.css');
});

Dann scheint es zu funktionieren.

Stellen Sie außerdem sicher, dass der Pfad der statischen Dateien mit / (ex ... / assets / css) ... beginnt, um statische Dateien in einem beliebigen Verzeichnis über dem Hauptverzeichnis (/ main) bereitzustellen.

wenn Ihr Setup

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

Geben Sie dann app.js ein

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

und verweisen Sie auf Ihre style.css: (in einer .pug-Datei):

link(rel='stylesheet', href='/static/stylesheets/style.css')

1. Erstellen Sie einen Ordner mit dem Namen 'public' im Nodejs-Projektordner
   .
2. Legen Sie die Datei index.html in den Nodejs-Projektordner.
3. Legen Sie alle Skript- und CSS-Dateien in einem öffentlichen Ordner ab.

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

5. und im index.html richtigen Pfad der Skripte zu<script type="text/javascript" src="/javasrc/example.js"></script>

Und jetzt funktionieren alle Dinge gut.

statisches Verzeichnis

Überprüfen Sie das obige Bild (statisches Verzeichnis) auf die Verzeichnisstruktur

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))