html - 如何使用 node.js 将 CSS 和 Bootstrap 文件加载到服务器?

标签 html css node.js

我有一个名为 myfile.html 的 html 文件,它显示“Hello World”。我的名为 myfile.css 的 css 文件用于插入背景图像。我的 Bootstrap 文件用于以圆圈形式插入图像。

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');
}

我的名为 new.js 的 node.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”。图像没有显示。我得到一个 Error 404.

如何通过包含所有 css 和引导文件来使用 node.js 在服务器中运行我的 HTML 文件?

最佳答案

您不得在 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>

关于html - 如何使用 node.js 将 CSS 和 Bootstrap 文件加载到服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44994217/

相关文章:

html - 具有动态宽度的并排(内联)div(CSS,无 JavaScript)

jquery - 如何在 jQuery 中将拖动的元素放入拖放的 div 中

javascript - 路由器 View 内容未呈现

json - 使用管道 Node 请求防止立交桥 api 上的 504 网关超时

node.js - 如何缩放、旋转和裁剪图像

html - Tidy 如何处理自闭合标签

html - 为什么我的 CSS Sprites 没有被应用?

javascript - 将我的页面更新为 jQuery

javascript - 函数覆盖类而不是添加新的

html - 依次放置几个div width full width 并调整图像背景的宽度和高度