it-swarm.com.de

Express-js kann meine statischen Dateien nicht erhalten, warum?

Ich habe meinen Code auf die einfachste express-js-App reduziert, die ich erstellen konnte:

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

Mein Verzeichnis sieht so aus:

static_file.js
/styles
  default.css

Wenn ich jedoch auf http://localhost:3001/styles/default.css zugreife, erhalte ich folgende Fehlermeldung:

Cannot GET / styles /
default.css

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

275
Kit Sunde

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

Um /styles in Ihrer Anforderungs-URL zu verwenden, 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'));
446
Giacomo

Ich habe das gleiche Problem. Ich habe das Problem mit folgendem Code gelöst:

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')));

Statisches Anforderungsbeispiel:

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

Ich brauche eine einfachere Lösung. Existiert es?

25
David Miró

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

Die Variable styles in app.use(express.static(__dirname + '/styles')); weist express lediglich an, im Verzeichnis styles nach einer statischen Datei zu suchen, die bereitgestellt werden soll. Es ist (verwirrend) nicht Teil des Pfads, auf dem es verfügbar ist.

12
diff_sky

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'));
7
user3418903

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 wie gewünscht erstellt und können dennoch auf diese Ordner zugreifen. In Ihrer Vorlagen-SRC haben Sie den relativen Pfad von/public (oder den Namen Ihres Ordner-Schicksals zu statischen Dateien) angegeben. Hüten Sie sich vor den Bars auf den Routen.

7
Baurin Leza

statische Dateien (CSS, Bilder, JS-Dateien) in nur zwei Schritten zu liefern:

  1. Übergeben Sie das Verzeichnis der CSS-Dateien an die 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 url http: // localhost: port/Dateiname.css ex: http: // localhost: 8081/bootstrap.css ein.

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

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 ein: localhost: port/css/filename.css ex: http: // localhost: 8081/css/bootstrap.css

note um CSS-Dateien mit HTML zu verknüpfen, fügen Sie einfach die folgende Zeile hinzu

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

Ich verwende in meiner Anwendung Bootstrap CSS, JS und Fonts. Ich habe einen Ordner namens asset im Stammverzeichnis der App erstellt und alle diese Ordner darin abgelegt. Dann in Server-Datei folgende Zeile hinzugefügt:

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

Diese Zeile ermöglicht es mir, die Dateien, die sich im Verzeichnis asset befinden, aus dem /asset Pfad-Präfix zu laden: http://localhost:3000/asset/css/bootstrap.min.css.

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

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

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')));
2
james gicharu

Was für mich funktioniert hat, ist:

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

Schreiben Sie einfach app.use(express.static('public/images'));

entfernen Sie den Namen des Stammverzeichnisses 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 :)

1
Amir Aslam

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

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

Sie geben dem Ordner eigentlich den Namen eines Ordners, d. H. Stile, nicht Ihre Suburl.

1
Sunil Lulla

wenn dein Setup

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

dann,
in app.js einfügen 

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')
0
Bar Horing

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

0
bigskier91

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.

0
Bren