html，css，node.js加载静态html时不显示css

node.js加载静态资源时不显示css，而且设置的超链接也无法跳转
我的项目结构：

首页：

跳转显示：

index.js代码：

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 8080;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/Introduction.html');
});

io.on('connection', (socket) => {
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running /`);
});

Introduction.html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>This is about me</title>
        <link rel="stylesheet" type="text/css" href="/public/style.css">
        <style>
        body {
            margin: 0;
            padding: 0;
            background: url("picture/background.jpg") no-repeat;
            background-size: cover;
        }
    </style>
    </head>
    <body>
        <div class="page">
            <div class="nav">
                <ul>
                    <li>
                        <a href="/public/Introduction.html"><span>Home Page</span></a>
                    </li>
                    <li class="detail">
                        <a href="Details.html">
                            <span>More details</span>
                            <ul class="more-details">
                                <li><a href="hobby.html">hobby</a></li>
                                <li><a href="subject.html">subject</a></li>
                                <li><a href="experience.html">experience</a></li>
                             </ul>
                        </a>
                    </li>
                    <li><a href="index.html"><span>Want to chat?</span></a></li>
                </ul>
            </div>
            <div class="mid">            
                <div class="left l">
                    <p class="metitle">Me</p>                    
                    <div class="me">
                        <img src="picture/me.jpg" alt="">
                        <p class="informationtitle">Basic information</p>
                            <p><b>Name：</b>xxx</p>
                            <p><b>Phone Number：</b>4444444</p>
                            <p><b>Email：</b>@qq.com</p>
                            <p><b>Habit：</b>Music</p>
                    </div>
                </div>
                <div class="book">
                    <img src="picture/book.jpg" alt="">
                </div>
                <div class="right l">
                    <p class="introductiontitle">Introduction</p>                    
                    <div class="word">                        
                        <p>待补充</p>
                    </div>
                </div>
            </div>
            <div class="foot">Designed by xxx</div>
        </div>
    </body>
</html>

设置静态目录


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

把这下面这行代码的路径直接设置成style.css


<link rel="stylesheet" type="text/css" href="/public/style.css">

路径是不是少了picture目录，同目录可以直接去掉public。
以下是基于new bing的回答：

路径错误

在代码中，加载CSS和图片时使用了相对路径。如果相对路径不正确，浏览器就无法找到对应的文件进行加载。请检查CSS文件和图片的相对路径是否正确。特别是在HTML文件中使用相对路径时，需要确保相对路径的起点是HTML文件所在目录。

静态资源未设置访问路径
在代码中使用Express框架创建了一个Web服务器，并在其中注册了路由，但是没有为静态资源设置访问路径。可以使用express.static中间件将指定目录下的文件作为静态资源进行访问。例如：

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

这样，在浏览器中请求localhost:8080/public/style.css时，就会自动加载服务器端目录下的/public/style.css文件。

超链接路径错误

在代码中使用了超链接跳转到其他页面，如果超链接的路径设置有误，浏览器就无法成功跳转到对应的页面。请检查超链接的路径是否正确，特别是相对路径的起点是否正确。

把这个加到js里面试试？


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