एक्सप्रेस-जेएस मेरी स्थिर फाइलों को प्राप्त नहीं कर सकता, क्यों?

308

मैंने अपना कोड सबसे सरल एक्सप्रेस-जेएस ऐप में घटा दिया है जो मैं कर सकता था:

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। मैं क्या गलत कर रहा हूं?

node.js express

— किट सुंडे
स्रोत

नीचे दिए गए लिंक की जाँच करें केवल 4ututorials.blogspot.com/2017/05/…

— Dexter

491

कोशिश करो http://localhost:3001/default.css।

करवाने के लिए /stylesआपके अनुरोध यूआरएल, उपयोग में:

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

— गियाकोमो
स्रोत

42

धन्यवाद। जब तक कोई व्यक्ति जो नोड और एक्सप्रेस के लिए नया है, तब तक एक्सप्रेस दस्तावेज़ स्केच लगता है जब तक आपको पता नहीं चलता कि कनेक्ट वह जगह है जहां मिडलवेयर डॉक्स हैं।

— नैट

4

हां। यह मेरे मामले में गायब स्लैश था ।

— बोरिसदिाकुर

मेरे मामले में मुझे महसूस नहीं हुआ कि पथ को पथ में शामिल किया गया था जैसा कि आपने दूसरे उदाहरण में बताया था। धन्यवाद!

— माइक चेले

नई स्थापना के मामले में आपको यह सत्यापित करना चाहिए कि आपका एक्सप्रेस मॉड्यूल ठीक से स्थापित है ( expressjs.com/en/starter/installing.html ) तो आपको रास्ते की जांच करनी चाहिए और आपके निर्देशिका का नाम जैसे Giacomo;)

— Spl2nky

हमेशा path.joinपार मंच निर्देशिका विभाजक मुद्दों पर काबू पाने के लिए उपयोग करें। path.join (__ dirname, '/')

— डग चैंबरलेन

35

मेरी भी यही समस्या है। मैंने निम्नलिखित कोड के साथ समस्या का समाधान किया है:

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

मुझे और अधिक सरल समाधान की आवश्यकता है। क्या यह मौजूद है?

— डेविड मिरो
स्रोत

आपका समाधान साझा करने के लिए धन्यवाद, भले ही यह इष्टतम हो या न हो। यदि आप अनुकूलन के लिए समस्या को फिर से खोलना चाहते हैं, तो नई परिस्थितियों के विवरण के साथ एक नया प्रश्न पोस्ट करने पर विचार करें। यदि अनुकूलन एकमात्र उद्देश्य है, तो प्रश्न SO कोड समीक्षा के लिए बेहतर हो सकता है ।

15

default.css पर उपलब्ध होना चाहिए http://localhost:3001/default.css

stylesमें app.use(express.static(__dirname + '/styles'));बस में देखने के लिए व्यक्त बताता stylesसेवा करने के लिए एक स्थिर फ़ाइल के लिए निर्देशिका। यह (भ्रामक) तब उस पथ का हिस्सा नहीं बनता जिस पर वह उपलब्ध है।

— diff_sky
स्रोत

3

पूरी तरह से! जो एक्सप्रेस में सम्मेलन द्वारा है। क्या आप इसे करते हैं /publicजिस पर css,jsimg फोल्डर हैं , इसलिए आप http://localhost:3001/css/default.css:) :)

— किट सुंडे

15

मेरे लिए यह काम:

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

— user3418903
स्रोत

9

अपने सर्वर में। Js:

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

आपने एक्सप्रेस और ऐप को अलग-अलग घोषित किया है, 'सार्वजनिक' नाम का एक फ़ोल्डर बनाएं या जैसा आप चाहें, और फिर भी आप इन फ़ोल्डर तक पहुंच सकते हैं। अपने टेम्पलेट src में, आपने / सार्वजनिक से सापेक्ष पथ (या आपके फ़ोल्डर का नाम स्थिर फ़ाइलों में नियति) जोड़ दिया है। मार्गों पर सलाखों से सावधान रहें।

— बाउरिन लेजा
स्रोत

6

मेरे लिए क्या काम किया है:

app.use(express.static(__dirname + 'public/images'));अपने app.js में लिखने के बजाय

सरलता से लिखिए app.use(express.static('public/images'));

यानी रूट में रूट डायरेक्टरी का नाम हटा दें। और फिर आप अन्य js फ़ाइलों में प्रभावी रूप से स्थैतिक पथ का उपयोग कर सकते हैं, उदाहरण के लिए:

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

उम्मीद है की यह मदद करेगा :)

— अमीर असलम
स्रोत

इससे मेरी समस्या हल हो गई। मेरे कोड में, __dirname कॉन्टेनेशन (path.join का उपयोग करके) के साथ भी CSS का पथ ठीक काम कर रहा था, जबकि js लाना विफल हो रहा था।

— चिम

मुझे खुशी है कि मदद मिली :)

— अमीर असलम

5

मैं अपने आवेदन में बूटस्ट्रैप सीएसएस, जेएस और फ़ॉन्ट्स का उपयोग कर रहा हूं। मैंने assetऐप की रूट डायरेक्टरी में फोल्डर बनाया और इन सभी फोल्डर को उसके अंदर रखा। फिर सर्वर फ़ाइल में निम्नलिखित लाइन जोड़ी गई:

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

यह लाइन मुझे उन फ़ाइलों को लोड करने में सक्षम करती है assetजो /assetपथ में उपसर्ग से निर्देशिका में हैं जैसे:http://localhost:3000/asset/css/bootstrap.min.css :।

अब विचारों में मैं नीचे की तरह सीएसएस और जेएस शामिल कर सकता हूं:

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

— arsho
स्रोत

5

स्थिर फ़ाइलों (css, images, js files) की सेवा के लिए सिर्फ दो चरण:

मिडिलवेयर एक्सप्रेस.स्टैटिक में निर्मित सीएसएस फाइलों की निर्देशिका को पास करें

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

HTML के साथ सीएसएस फ़ाइलों को लिंक करने के लिए ध्यान दें, बस निम्नलिखित पंक्ति जोड़ें

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

— अहमद महमूद
स्रोत

3

यह एक मेरे लिए काम किया

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

— जेम्स गिहारू
स्रोत

1

इसे http: // localhost: 3001 / default.css के साथ एक्सेस करने का प्रयास करें ।

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

आप वास्तव में इसे फ़ोल्डर का नाम दे रहे हैं यानी स्टाइल आपके सबरेल नहीं।

— सुनील लुल्ला
स्रोत

1

मुझे मेरी सीएसएस फ़ाइल मिल गई और उसमें एक मार्ग जोड़ दिया गया:

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

तब यह काम करने लगता है।

— ब्रेन
स्रोत

मैं इस दृष्टिकोण की सिफारिश नहीं करूंगा क्योंकि आपको एक्सप्रेसजेएस .use()और express.static()विधियों का उपयोग करना चाहिए जहां आप अपनी फाइलों को सेवा दे रहे हैं। अन्यथा आपकी सार्वजनिक निर्देशिका में प्रति फ़ाइल इन राउटरों में से एक होगा और जिसे बनाए रखने के लिए बहुत अधिक ओवरहेड है।

— सग्नल

यह एक काम है, लेकिन मुझे नहीं लगता कि यह उचित है। यदि आपके पास कई सीएसएस और जेएस फाइलें हैं, तो आप इसे कैसे बनाए रख सकते हैं?

— मेष राशि

0

उपरोक्त के अलावा, सुनिश्चित करें कि स्थिर फ़ाइल पथ / (पूर्व ... / संपत्ति / सीएसएस) से शुरू होता है ... मुख्य निर्देशिका (/ मुख्य) के ऊपर किसी भी निर्देशिका में स्थिर फ़ाइलों की सेवा करने के लिए

— bigskier91
स्रोत

2

इसके अतिरिक्त क्या है? इसे अपने उत्तर में बताएं (इसे पोस्ट करने वाले व्यक्ति को क्रेडिट दें, यदि आपके पास है)। SO अक्सर उत्तरों के क्रम को बदलता है ताकि सभी उत्तर देखे जा सकें और पहले कुछ नहीं। हम नहीं जानते कि आप किस बारे में बात कर रहे हैं।

— ज़ाचरी नाइबेल

0

अगर आपका सेटअप

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

— बार किराए पर लेना
स्रोत

आप नाम बदलने के कदम को सार्वजनिक क्यों करेंगे -> स्थिर? मैं कहूंगा कि बस अतिरिक्त जानकारी को भ्रमित करना है। लेकिन तब फिर से अप्रत्यक्ष रूप से आम तौर पर एक अच्छी बात है ...

— मास्टरएक्सिलो

0

नोड्स प्रोजेक्ट में 'सार्वजनिक' नाम के साथ एक फ़ोल्डर बनाएँ
फ़ोल्डर ।
Nodejs प्रोजेक्ट फ़ोल्डर में index.html फ़ाइल डालें।
सभी स्क्रिप्ट और सीएसएस फ़ाइल को सार्वजनिक फ़ोल्डर में डालें।
उपयोग app.use( express.static('public'));
और index.html स्क्रिप्ट के सही रास्ते में<script type="text/javascript" src="/javasrc/example.js"></script>

और अब सभी चीजें ठीक काम करती हैं।

— होसेन मोरडज़ादेह
स्रोत

0

स्थिर निर्देशिका

डीआईआर संरचना के लिए उपरोक्त छवि (स्थिर निर्देशिका) की जांच करें

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

— helloJT
स्रोत