如何使用node.js将CSS和Bootstrap文件加载到服务器中？

Question

我有一个名为myfile.html的html文件，其中显示“ Hello World”。 我的css文件myfile.css用于插入背景图像。 我的引导程序文件用于以圆圈形式插入图像。

HTML文件如下：

 <!DOCTYPE html>
 <html>
     <head>
         <title>MY FILE</title>
         <link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
         <link rel="stylesheet" type="text/css" href="public\myfile.css">
     </head>
     <body>
         <h1>Hello World!!</h1>

         <img src="public\pinky.jpg"  class="img-circle">
     </body>
 </html>

我的CSS文件如下：

body {
    background-image: url('fishy.jpg');
}

我的node.js文件名为new.js如下：

  const express = require('express')
  const app = express()
  app.use(express.static('public'))

  app.get('/',function (req,res) {
          console.log(__dirname)
          res.sendFile(__dirname+"/myfile.html")
  })

  app.listen(3000, function() {
          console.log('Example app listening on port 3000!')
  })

我的主文件夹称为Bootsstrap，它包含以下内容：

     Bootsstrap
          -myfile.html
          -public /*Folder*/

         /*inside public folder*/
          -myfile.css
          -css
          -js
          -fonts
          -fishy.jpg /*background image*/
          -pinky.jpg /*circular image*/

我从Bootsstrap文件夹中打开命令提示符并运行

           node new.js

我得到的消息是：

          'Example app listening on port 3000!'

当我打开Chrome浏览器并输入localhost：3000时，仅显示``Hello World''，但图像未显示。 我收到错误 404。

为了通过包含所有css和bootstrap文件来使用node.js在服务器中运行HTML文件，该怎么办？

Answer 1

如果您要提供静态文件（例如html文件， css和图像），则需要将其公开。 在您现有的设置中，只有myfile.html可供公众使用。 由于您使用服务器中的CSS和其他文件，因此还需要使它们可用。 为了达到最好的方法是创建一个public文件夹，并让快递尽在提供的所有文件public文件夹。

添加到node.js

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

并将您的myfile.html重命名为index.html

并在您的index.html文件中

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="myfile.css">

例如，您的node.js应该看起来像

  const express = require('express');
  const app = express();
  app.use('/', express.static('public'));

  app.listen(3000, function () {
          console.log('Example app listening on port 3000!');
  });

有关更多信息，在Express中提供静态文件

编辑

您的文件夹结构应该是。 无需bootstap文件夹

      public //public folder
          -index.html
          -myfile.css
          -css
          -js
          -fonts
          -fishy.jpg 
          -pinky.jpg

Answer 2

您不得在html中使用public路径。 另外，在URL中始终使用正斜杠。 反斜杠仅适用于Windows目录。

<!DOCTYPE html> <html> <head> <title>MY FILE</title> 
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1> 
<img src="pinky.jpg" class="img-circle"> </body> </html>

Answer 3

更换

<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">

通过

<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">

如何使用node.js将CSS和Bootstrap文件加载到服务器中？

问题描述

3 个解决方案

解决方案1
0 2017-07-09 07:52:22

解决方案2
0 2017-07-09 07:59:30

解决方案3
0 2017-07-09 08:01:06

如何使用node.js将CSS和Bootstrap文件加载到服务器中？

问题描述

3 个解决方案

解决方案1 0 2017-07-09 07:52:22

解决方案2 0 2017-07-09 07:59:30

解决方案3 0 2017-07-09 08:01:06

解决方案1
0 2017-07-09 07:52:22

解决方案2
0 2017-07-09 07:59:30

解决方案3
0 2017-07-09 08:01:06