Express-js가 정적 파일을 가져올 수없는 이유는 무엇입니까?

코드를 가장 간단한 express-js 앱으로 축소했습니다.

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

내 디렉토리는 다음과 같습니다

static_file.js
/styles
  default.css

그러나 액세스 할 때 http://localhost:3001/styles/default.css다음 오류가 발생합니다.

Cannot GET / styles /
default.css

그리고를 사용 express 2.3.3하고 node 0.4.7있습니다. 내가 뭘 잘못하고 있죠?

시도하십시오 http://localhost:3001/default.css.

/styles요청 URL에 포함 시키 려면 다음을 사용하십시오.

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

이 페이지 의 예를 살펴보십시오 .

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

나도 같은 문제가있어. 다음 코드로 문제를 해결했습니다.

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

정적 요청 예 :

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

더 간단한 해결책이 필요합니다. 존재합니까?

default.css 에 이용 가능해야한다 http://localhost:3001/default.css

styles의 app.use(express.static(__dirname + '/styles'));단지는에보고 표현 알려줍니다 styles봉사하는 정적 파일 디렉토리. 사용 가능한 경로의 일부를 혼동하지 않습니다.

이것은 나를 위해 작동합니다 :

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

server.js에서 :

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

express와 app을 별도로 선언하고 'public'이라는 이름의 폴더를 만들거나 원하는대로 만들 수 있지만이 폴더에 액세스 할 수 있습니다. 템플릿 src에서 / public의 상대 경로 (또는 폴더 운명의 이름을 정적 파일)를 추가했습니다. 경로에있는 막대를주의하십시오.

나를 위해 일한 것은 다음과 같습니다.

app.use(express.static(__dirname + 'public/images'));app.js 를 작성하는 대신

간단히 쓰기 app.use(express.static('public/images'));

즉, 경로에서 루트 디렉토리 이름을 제거하십시오. 그런 다음 다른 js 파일에서 정적 경로를 효과적으로 사용할 수 있습니다. 예를 들면 다음과 같습니다.

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

도움이 되었기를 바랍니다 :)

내 응용 프로그램에서 Bootstrap CSS, JS 및 Fonts를 사용하고 있습니다. 나는라는 폴더 생성 asset루트 응용 프로그램의 디렉토리와 장소 그 안에 모든 폴더에 있습니다. 그런 다음 서버 파일에서 다음 줄을 추가했습니다.

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

이 줄을 사용하면 다음과 같은 경로 접두사 asset에서 디렉토리 에있는 파일을로드 할 수 있습니다 ./assethttp://localhost:3000/asset/css/bootstrap.min.css

이제 뷰에서 아래처럼 CSS와 JS를 간단히 포함시킬 수 있습니다.

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

정적 파일 (css, images, js 파일)을 제공하기 위해 두 단계 만 거치면됩니다.

1. css 파일의 디렉토리를 내장 미들웨어 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. CSS 파일 또는 이미지에 액세스하려면 URL http : // localhost : port / filename.css를 입력 하십시오. 예 : http : // localhost : 8081 / bootstrap.css

노트: CSS 파일을 HTML에 연결하려면 을 입력하십시오.<link href="file_name.css" rel="stylesheet">

이 코드를 작성하면

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

정적 파일에 액세스하려면 url : localhost : port / css / filename.css를 입력 하십시오. 예 : http : // localhost : 8081 / css / bootstrap.css

참고 HTML로 링크 CSS 파일로는 다음과 같은 줄을 추가

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

이것은 나를 위해 일했다

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

http : // localhost : 3001 / default.css로 액세스하십시오 .

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

실제로 폴더 이름, 즉 하위 URL이 아닌 스타일 이름을 지정하고 있습니다.

내 CSS 파일을 찾아 경로를 추가하십시오.

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

그런 다음 작동하는 것 같습니다.

위와 더불어 정적 파일 경로가 / (ex ... / assets / css) ...로 시작하여 기본 디렉토리 (/ main) 위의 디렉토리에 정적 파일을 제공하도록하십시오.

만약 당신의 설정

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

그런 다음
app.js를 넣으십시오.

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

style.css를 참조하십시오 (일부 .pug 파일).

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

1. Nodejs 프로젝트에서 'public'이름으로 폴더 만들기
   폴더 .
2. index.html 파일을 Nodejs 프로젝트 폴더에 넣습니다.
3. 모든 스크립트와 CSS 파일을 공용 폴더에 넣습니다.

4. 사용하다 app.use( express.static('public'));

5. 과에서 index.html 스크립트의 올바른 경로에<script type="text/javascript" src="/javasrc/example.js"></script>

이제 모든 것이 잘 작동합니다.

정적 디렉토리

dir 구조는 위의 이미지 (정적 디렉토리)를 확인하십시오.

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