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

相关推荐
用户新2 小时前
JS事件深度解析四 事件的循环和异步
前端·javascript·事件·event loop
LIUAWEIO12 小时前
CSS 让鼠标呈现手型,鼠标悬浮变小手
css·html·css3·html5
LIUAWEIO13 小时前
vue里面下载配置使用zepto vue中怎样使用zepto
javascript·vue.js·es6·zepto
lantian13 小时前
TypeScript 三斜线指令完全指南:从入门到理解为什么不再需要它
前端·javascript·vue.js
用户9385156350713 小时前
从"用栈实现队列"说起:深入理解 JavaScript 原型式面向对象
javascript
ZengLiangYi13 小时前
AI 编程工具的数据格式为什么不能统一
javascript·后端·架构
陈_杨13 小时前
鸿蒙APP开发-带你走进旧物集的时间线与收藏管理
前端·javascript
尼斯湖皮皮怪13 小时前
iceCoder双模详解
javascript
小雨下雨的雨13 小时前
月相分析工具鸿蒙PC Electron框架技术实现详解
前端·javascript·华为·electron
布依前端13 小时前
基于 Vue 3 的 Tiptap 富文本编辑器实践:tiptap-editor-vue3 项目介绍
前端·javascript·vue.js