Question

我使用nodeJS和express创建一个http服务器。我为html页面做路由器，但css，图像和js文件被忽略。

我查了一下，路径还可以。

我尝试使用express的静态功能，但它不起作用。

如果您有任何想法：）

server.js

var http = require("http");
var url = require("url");
var fs = require('fs');
//var express = require('express');
//var app = express();

//app.use(express.static( __dirname + "/views/web/assets/img"));

var server = http.createServer(function(req, res) 
{
    var pathName = url.parse(req.url).pathname;
    console.log(__dirname + "/views/web" + pathName);
    fs.readFile( __dirname + "/views/web" + pathName , "utf8" , function(error , file){
     if(error) {
          res.writeHead(404 , {"Content-Type" : "text/html" }); 
          res.end();
     }else{
          res.writeHead(200 , {"Content-Type" : "text/html" }); 
          res.write(file);
          res.end();
     }      
    });
});

server.listen(1337);
console.log("Serveur web lancé sur localhost:1337 ...");

login.html的摘录：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile - Login</title>
    <link rel="icon" type="image/png" href="assets/img/logo.png" />
    <!-- BOOTSTRAP STYLES-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="assets/css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

</head>

路径验证：

proux@DESKTOP-VDRS1QF:/mnt/d/Users/Elodie/Desktop/server$ node server.js
Serveur web lancé sur localhost:1337 ...
/mnt/d/Users/Elodie/Desktop/server/views/web/
/mnt/d/Users/Elodie/Desktop/server/views/web/
/mnt/d/Users/Elodie/Desktop/server/views/web/login.html
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/css/bootstrap.css
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/css/font-awesome.css
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/css/custom.css
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/js/jquery-1.10.2.js
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/js/bootstrap.min.js
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/js/jquery.metisMenu.js
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/js/custom.js
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/img/nom_blanc.png
/mnt/d/Users/Elodie/Desktop/server/views/web/assets/img/logo.png

Elodie

Answer 1

你表达静态是服务/公共，是什么？因为我注意到你最初有这个：

app.use(express.static( __dirname + "/views/web/assets/img"));
<link rel="icon" type="image/png" href="assets/img/logo.png" />

你应该有这样的东西：

app.use(express.static( __dirname + "/views/web"));
<link rel="icon" type="image/png" href="/assets/img/logo.png" />

鉴于您的路径如下：

/mnt/d/Users/Elodie/Desktop/server/views/web/assets/img/logo.png

Answer 2

您需要更改文件的内容类型。

在NodeJS中使用CSS / IMG / JS

2 个答案: