node.js - 图像和 css 不起作用

Question

I'm a newbie in node.js and I just made a chat based on socket.io example. I did a login form on the index of my application but the images and css are not working when I access to my application on localhost:3000. However, when I launch my index.html directly on my browser the css and the images are correctly loaded.

That's the tree of my application : Tree view

And that is what I see when I launch my node js server and I access to localhost:myPort: index.html on localhost

That the head of index.html :

<meta charset="UTF-8">
<title>Khoya Talk</title>
<link rel="shortcut icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">-->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Thank you for your help.

Answer 1

Add / before all public and:

App.js

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

index.html

<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">

And make this for all path. And src property in images:

<img src="/assets/images/halftone.png">

Answer 2

When you load the page in your browser, check the developer tools / debugger to see whats happening.

If it cant find the css (or the images), its because you need to use Express like this (in your js file): At the top add:

 var express = require("express");
 var app     = express();

Then add folders with the content like this:

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

Answer 3

Apparently, you have to use the / with the static directory

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

Then in your CSS: background-image('img/pic.png') where img is the folder you store your images in, and make sure it is in the public folder.

Hope that helps.