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의 상대 경로 (또는 폴더 운명의 이름을 정적 파일)를 추가했습니다. 경로에있는 막대를주의하십시오.
내 응용 프로그램에서 Bootstrap CSS, JS 및 Fonts를 사용하고 있습니다. 나는라는 폴더 생성 asset
루트 응용 프로그램의 디렉토리와 장소 그 안에 모든 폴더에 있습니다. 그런 다음 서버 파일에서 다음 줄을 추가했습니다.
app.use("/asset",express.static("asset"));
이 줄을 사용하면 다음과 같은 경로 접두사 asset
에서 디렉토리 에있는 파일을로드 할 수 있습니다 ./asset
http://localhost:3000/asset/css/bootstrap.min.css
이제 뷰에서 아래처럼 CSS와 JS를 간단히 포함시킬 수 있습니다.
<link href="/asset/css/bootstrap.min.css" rel="stylesheet">
정적 파일 (css, images, js 파일)을 제공하려면 다음 두 단계 만 수행하십시오.
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'));
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(__dirname + 'public/images'));
app.js 를 작성하는 대신
간단히 쓰기 app.use(express.static('public/images'));
즉, 경로에서 루트 디렉토리 이름을 제거하십시오. 그런 다음 다른 js 파일에서 정적 경로를 효과적으로 사용할 수 있습니다. 예를 들면 다음과 같습니다.
<img src="/images/misc/background.jpg">
도움이 되었기를 바랍니다 :)
이것은 나를 위해 일했다
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')
- Nodejs 프로젝트
폴더 에 'public'이름으로 폴더를 작성하십시오 . - index.html 파일을 Nodejs 프로젝트 폴더에 넣습니다.
- 모든 스크립트 및 CSS 파일을 공용 폴더에 넣습니다.
사용하다
app.use( express.static('public'));
과에서
index.html
스크립트의 올바른 경로에<script type="text/javascript" src="/javasrc/example.js"></script>
이제 모든 것이 잘 작동합니다.
참고 URL : https://stackoverflow.com/questions/5924072/express-js-cant-get-my-static-files-why
'IT' 카테고리의 다른 글
에뮬레이터에서 Android 애플리케이션이 실행 중인지 어떻게 알 수 있습니까? (0) | 2020.03.18 |
---|---|
URL 인코딩은 "&"(앰퍼샌드)를 "&"HTML 엔터티로 인식 (0) | 2020.03.18 |
생성자에서 직접 메소드를 정의하는 것과 프로토 타입을 사용하는 이점은 무엇입니까? (0) | 2020.03.18 |
android studio에서 gradle을 업데이트하는 방법은 무엇입니까? (0) | 2020.03.18 |
널 입력 가능하도록 열 변경 (0) | 2020.03.18 |