Why my jQuery, files are not loaded?

Question

I import jQuery, boostrap in my head like this

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>

I'm trying to use NodeJS and Express like this, I found it on Google

var http = require('http');
var fs = require('fs');
var express = require('express');
var app = express();

http.createServer(function(req, res) {
fs.readFile('main.html', function(err, data) {
res.writeHead(200, {
  'Content-Type': 'text/html',
  'Content-Length': data.length
});
res.write(data);
res.end();
});
}).listen(8000);

But when my page is loaded, those libs are not loaded. I also have some images

    <div class="item active">
          <a href="vungtau.html">
          <img src="IntroduceImage/VungTau.jpg" alt="Vũng Tàu">
          <div class="carousel-caption">
            <h3>Vũng Tàu</h3>
            <h4>Lần đầu đi Vũng Tàu bằng xe máy</h4>
          </div>
          </a>
        </div>

They are not loaded too. This is address: D:\Atom Project\IntroduceImage\VungTau.jpg

Anyone know why? It I load it without NodeJS like this file:///D:/Atom%20Project/main.html. They're all loaded. Please help, Im new to NodeJS.

go through express documentation there is express.static to configure root path of application then according to that relative path give the files refrence — Akshay
– Akshay, Commented Mar 7, 2018 at 6:19
Please refer this link to include files using NodeJS + Express into your project. — Manpreet Matharu
– Manpreet Matharu, Commented Mar 7, 2018 at 6:25
Thank you, @ManpreetMatharu, compare with your link, and tried some search. I did it. — Nguyen Hoang Vu
– Nguyen Hoang Vu, Commented Mar 7, 2018 at 6:33

Nikhil Savaliya · Accepted Answer · 2018-03-07 06:24:04Z

1

You have to give file reference path as given in express.js-staticFile

something like,

const path = require('path');

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

I have my images stored in the root directory of the server.

answered Mar 7, 2018 at 6:24

Nikhil Savaliya

2,1664 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nguyen Hoang Vu Over a year ago

Does it really need "pp.use(express.static(path.join(__dirname, 'public')));"? I only use "app.use(express.static('./'));", it works fine

Nikhil Savaliya Over a year ago

if you have an external file in public directory so,

Nikhil Savaliya Over a year ago

@NguyenHoangVu-K11FUGHCM Welcome

Akshay · Accepted Answer · 2018-03-07 06:22:34Z

0

hint as follows

app.use('/static', express.static(path.join(__dirname)));

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

go through this link

https://expressjs.com/en/starter/static-files.html

answered Mar 7, 2018 at 6:22

Akshay

8057 silver badges16 bronze badges

Collectives™ on Stack Overflow

Why my jQuery, files are not loaded?

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related