web-dev-qa-db-fra.com

Express-js ne peut pas obtenir mes fichiers statiques, pourquoi?

J'ai réduit mon code à l'application express-js la plus simple que j'ai pu créer:

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

Mon répertoire ressemble à ceci:

static_file.js
/styles
  default.css

Pourtant, lorsque j'accède à http://localhost:3001/styles/default.css, l'erreur suivante apparaît:

Cannot GET / styles /
default.css

J'utilise express 2.3.3 et node 0.4.7. Qu'est-ce que je fais mal?

node.jsexpress
275
Kit Sunde

Essayez http://localhost:3001/default.css.

Pour avoir /styles dans votre URL de requête, utilisez:

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

Regardez les exemples sur cette page :

//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

J'ai le même problème. J'ai résolu le problème avec le code suivant:

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

Exemple de demande statique:

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

J'ai besoin d'une solution plus simple. Est-ce qu'il existe?

25
David Miró

default.css devrait être disponible à http://localhost:3001/default.css

La styles dans app.use(express.static(__dirname + '/styles')); indique simplement à express de rechercher dans le répertoire styles un fichier statique à servir. Cela ne fait pas (confusion) alors faire partie du chemin sur lequel il est disponible.

12
diff_sky

Ce travail pour moi:

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

Dans votre server.js:

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

Vous avez declare express et app séparément, créez un dossier nommé "public" ou à votre guise, et pourtant vous pouvez accéder à ces dossiers. Dans votre modèle de code src, vous avez mis le chemin relatif de/public (ou le nom de votre dossier dans des fichiers statiques). Méfiez-vous des bars sur les itinéraires.

7
Baurin Leza

pour servir des fichiers statiques (css, images, fichiers js), il suffit de suivre deux étapes:

  1. passer le répertoire des fichiers css au middleware intégré 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. pour accéder aux fichiers css ou aux images, saisissez simplement url http: // localhost: port/filename.css ex: http: // localhost: 8081/bootstrap.css

note: pour lier les fichiers css au format HTML, tapez simplement<link href="file_name.css" rel="stylesheet">

si j'écris ce code 

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

pour accéder aux fichiers statiques il suffit de taper url: localhost: port/css/nomfichier.css ex: http: // localhost: 8081/css/bootstrap.css

note pour lier des fichiers CSS avec HTML, ajoutez simplement la ligne suivante

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

J'utilise Bootstrap CSS, JS et Fonts dans mon application. J'ai créé un dossier appelé asset dans le répertoire racine de l'application et j'y ai placé tous ces dossiers. Puis dans le fichier du serveur ajouté la ligne suivante:

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

Cette ligne me permet de charger les fichiers du répertoire asset à partir du préfixe du chemin /asset, tel que: http://localhost:3000/asset/css/bootstrap.min.css.

Maintenant, dans les vues, je peux simplement inclure CSS et JS comme ci-dessous:

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

celui-ci a fonctionné pour moi

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

Ce qui a fonctionné pour moi est:

Au lieu d'écrireapp.use(express.static(__dirname + 'public/images'));dans votre application.js

Écrivez simplement app.use(express.static('public/images'));

je supprime le nom du répertoire racine dans le chemin. Et vous pouvez ensuite utiliser efficacement le chemin statique dans d’autres fichiers js, par exemple: 

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

J'espère que cela t'aides :)

1
Amir Aslam

Essayez d’y accéder avec http: // localhost: 3001/default.css .

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

Vous lui donnez le nom du dossier, c'est-à-dire pas votre style.

1
Sunil Lulla

si votre configuration

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

puis,
mettre dans app.js 

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

et référez-vous à votre style.css: (dans certains fichiers .pug):

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

En plus de ce qui précède, assurez-vous que le chemin du fichier statique commence par/(ex .../assets/css) ... pour servir des fichiers statiques dans n’importe quel répertoire au-dessus du répertoire principal (/ main).

0
bigskier91

Je trouve mon fichier css et y ajoute un itinéraire:

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

Ensuite, cela semble fonctionner.

0
Bren