当我将两个参数传递给app.get时，为什么我的CSS不起作用？

Question

我正在创建一个快速应用程序，每当我向URL添加“：ID”参数时，我的CSS代码就会停止工作。 我知道这是一个文件路径问题，因为bootstrap仍然很好，但在带有ID参数的页面上显示：“拒绝从' https://XXXXXX.c9users.io/unapproved/main.css '应用样式，因为它MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。“

main.css在我的/ public文件夹中，但看起来它正在查找标题为“未批准”的文件夹。

我已经尝试更改路由顺序，我已经尝试更改我的app.use（express.static（__ dirname））代码。

这是我的app.get：

app.get("/unapproved/:id/", function(req, res){
    var invoiceID = mongoose.mongo.ObjectId(req.params.id);
    InvoiceObj.findById(invoiceID,function(err,foundInvoice){
        if(err){
            console.log(err);
        }else{
            res.render("invoiceScreen",{invoice:foundInvoice});
        }
    });

这是我的HTML：

<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>

这是我的标题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Invoice system</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <script src='https://code.jquery.com/jquery-2.1.4.js'></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

Answer 1

在这种情况下，最好为静态文件使用virtual path ，因为相对路径不能很好地工作; 喜欢：

假设文件夹结构：

app.js
public
|  +-- main.css

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

在你的html ，使路径绝对

<link rel="stylesheet" href="/static/main.css">

Answer 2

我认为改变css路径绝对路径将解决你的问题

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

Answer 3

而不是在你的assest（images / css / js）之前使用./或../。 ./css/style.css或css / bootstrap.css ../images/example.png

你可以使用/例如/css/style.css或/css/bootraps.css /images/example.png

/将告诉您的应用程序从根目录看。