Express-js nie może uzyskać moich plików statycznych, dlaczego?

Zredukowałem swój kod do najprostszej aplikacji express-js, jaką mogłem zrobić:

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

Mój katalog wygląda następująco:

static_file.js
/styles
  default.css

Jednak po uzyskaniu dostępu pojawia http://localhost:3001/styles/default.csssię następujący błąd:

Cannot GET / styles /
default.css

Używam express 2.3.3i node 0.4.7. Co ja robię źle?

Spróbować http://localhost:3001/default.css.

Aby mieć /stylesadres URL żądania, użyj:

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

Spójrz na przykłady na tej stronie :

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

Mam ten sam problem. Rozwiązałem problem z następującym kodem:

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

Przykład żądania statycznego:

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

Potrzebuję prostszego rozwiązania. Czy to istnieje?

default.css powinien być dostępny pod adresem http://localhost:3001/default.css

In stylespo app.use(express.static(__dirname + '/styles'));prostu mówi ekspresowi, aby szukał w styleskatalogu statycznego pliku do obsłużenia. Nie tworzy (myląco) części ścieżki, na której jest dostępny.

Ta praca dla mnie:

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

W twojej server.js:

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

Zadeklarowałeś osobno ekspres i aplikację osobno, utwórz folder o nazwie „publiczny” lub jak chcesz, a mimo to możesz uzyskać do niego dostęp. W szablonie src dodano ścieżkę względną z / public (lub nazwę przeznaczenia folderu do plików statycznych). Uważaj na paski na trasach.

Dla mnie zadziałało:

Zamiast pisać app.use(express.static(__dirname + 'public/images'));w pliku app.js

Po prostu napisz app.use(express.static('public/images'));

tzn. usuń nazwę katalogu głównego ze ścieżki. Następnie możesz efektywnie wykorzystać ścieżkę statyczną w innych plikach js, na przykład:

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

Mam nadzieję że to pomoże :)

Używam Bootstrap CSS, JS i czcionek w mojej aplikacji. Utworzyłem folder o nazwie assetw katalogu głównym aplikacji i umieściłem w nim wszystkie te foldery. Następnie w pliku serwera dodano następujący wiersz:

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

Linia ta pozwala mi załadować pliki znajdujące się w assetkatalogu z /assetprzedrostkiem ścieżki jak: http://localhost:3000/asset/css/bootstrap.min.css.

Teraz w widokach mogę po prostu dołączyć CSS i JS jak poniżej:

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

do obsługi plików statycznych (css, obrazy, pliki js) wystarczy dwa kroki:

1. przekazać katalog plików css do wbudowanego oprogramowania pośredniego 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. aby uzyskać dostęp do plików lub obrazów css, po prostu wpisz adres URL http: // localhost: port / filename.css np: http: // localhost: 8081 / bootstrap.css

Uwaga: aby połączyć pliki CSS z HTML, po prostu wpisz<link href="file_name.css" rel="stylesheet">

jeśli napiszę ten kod

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

aby uzyskać dostęp do plików statycznych, wpisz adres URL: localhost: port / css / filename.css np: http: // localhost: 8081 / css / bootstrap.css

Uwaga, aby połączyć pliki css z HTML, wystarczy dodać następujący wiersz

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

ten działał dla mnie

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

Spróbuj uzyskać do niego dostęp za pomocą http: // localhost: 3001 / default.css .

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

W rzeczywistości nadajesz mu nazwę folderu, tzn. Style, a nie suburl.

Znajduję mój plik css i dodam do niego trasę:

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

To wydaje się działać.

Oprócz powyższego upewnij się, że ścieżka do pliku statycznego zaczyna się od / (ex ... / resources / css) ... aby obsługiwać pliki statyczne w dowolnym katalogu powyżej katalogu głównego (/ main)

jeśli twoja konfiguracja

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

następnie
wstaw app.js

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

i odwołaj się do swojego style.css: (w pliku .pug):

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

1. Utwórz folder o nazwie „publicznej” w projekcie Nodejs
   folderze .
2. Umieść plik index.html w folderze projektu Nodejs.
3. Umieść cały skrypt i plik css w folderze publicznym.

4. Posługiwać się app.use( express.static('public'));

5. i we index.html właściwej ścieżce skryptów do<script type="text/javascript" src="/javasrc/example.js"></script>

A teraz wszystko działa dobrze.

katalog statyczny

sprawdź powyższy obraz (katalog statyczny) pod kątem struktury katalogu

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