关于server.js启动html时出现的css样式和图片加载问题

明明单独启动

查看server.js代码

javascript 复制代码
app.use(express.static('public'));

发现这样一句话

app.use(express.static('public'))这行代码的作用是指定public目录为静态资源目录,这样客户端就可以直接访问这个目录下的文件了

但是有个非常重要的问题 此时要注意你的路径 当你把css样式或图片放入这个public路径时

不应该是

html 复制代码
    <link rel="stylesheet" href="./public/style.css">
html 复制代码
    <img src="./public/img/school_logo.png" alt="school logo">

而应该是

html 复制代码
    <link rel="stylesheet" href="style.css">
html 复制代码
    <img src="./img/school_logo.png" alt="school logo">

这是因为当用户请求http://端口/images/logo.png时,服务器会自动从public/images/logo.png文件中读取内容并返回给用户,而不需要你编写任何额外的路由处理逻辑

相关推荐
gzzeason15 分钟前
在HTML中CSS三种使用方式
前端·css·html
huihuihuanhuan.xin30 分钟前
前端八股-promise
前端·javascript
西瓜_号码1 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
mrsk1 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
A了LONE2 小时前
h5的底部导航栏模板
java·前端·javascript
Zsnoin能2 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
轻语呢喃2 小时前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂2 小时前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
Sapphire~3 小时前
重学前端003 --- CSS 颜色
前端·css
我血条子呢3 小时前
动态组件和插槽
前端·javascript·vue.js