Почему мой CSS не работает, когда я передаю два параметра в app.get? - PullRequest
Новая
       10

Почему мой CSS не работает, когда я передаю два параметра в app.get?

0 голосов
/ 16 апреля 2019

Я создаю экспресс-приложение, и мой код CSS перестает работать всякий раз, когда я добавляю параметр «: ID» в URL. Я знаю, что это проблема пути к файлу, потому что загрузчик все еще в порядке, но на странице с параметром ID это показывает: «Отказался от применения стиля из 'https://XXXXXX.c9users.io/unapproved/main.css', потому что его тип MIME (' text / html ') не поддерживается тип MIME таблицы стилей, и включена строгая проверка MIME. "

main.css находится в моей / общедоступной папке, но, похоже, он выглядит в папке с заголовком «не утверждено».

Я попытался изменить порядок маршрутизации, я попытался изменить мой код 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>

Ответы [ 3 ]

0 голосов
/ 16 апреля 2019

Я думаю, что изменение абсолютного пути к css решит вашу проблему 

<link rel="stylesheet" href="/main.css">
0 голосов
/ 27 апреля 2019

вместо использования ./ или ../ перед вашей сборкой (images / css / js), например. ./css/style.css или css / bootstrap.css ../images/example.png

вы можете использовать / например / css / style.css или / css / bootraps.css / images / example.png

/ скажет вашему приложению искать из корневого каталога.

0 голосов
/ 16 апреля 2019

В такой ситуации лучше использовать virtual path для статических файлов, потому что относительный путь не очень хорошо работает; как:

Предполагая структуру папок: 

app.js
public
|  +-- main.css

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

А в вас html сделайте путь абсолютным 

<link rel="stylesheet" href="/static/main.css">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...