关于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文件中读取内容并返回给用户,而不需要你编写任何额外的路由处理逻辑

相关推荐
兰亭妙微UI设计公司9 分钟前
兰亭妙微软件界面设计公司的解锁按钮设计10大密码
开发语言·前端·javascript
u0111026751 小时前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
java1234_小锋1 小时前
【技术专题】HTML5 网页技术 - HTML5 列表标签
前端·html·html5
小皮虾2 小时前
小程序全局状态还能这么简单?只需初始化一次,页面自动同步
前端·javascript·微信小程序
daols882 小时前
vue 甘特图组件 vxe-gantt 修改滚动条样式-让滚动条自动隐藏
javascript·vue.js·甘特图
今年下半年3 小时前
【前端】Vue2 项目 ECharts 统计图表组件封装与使用实践(附组件源码)
前端·javascript·echarts
冒险的豆子3 小时前
JS 原型链 通俗易懂 解释说明(类比 关系)
开发语言·javascript·原型模式
西索斯coding3 小时前
在 中接入 教程:p配置、m填写、扩展思考参数一篇就够(2)
java·前端·javascript·ai
用户1733598075373 小时前
纯前端 PDF 双面打印避坑指南:翻页顺序错了整个白印?
前端·javascript·vue.js
SensorFlow3 小时前
从神策 SDK 迁移到 SensorFlow:采集层平滑迁移实战
javascript