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

相关推荐
JackieZhengChina1 分钟前
image-viewer-js 开源图片查看插件完整教程
开发语言·javascript·开源
光影少年14 分钟前
react的View/Text/Image/ScrollView 常用组件注意事项
开发语言·前端·javascript·react.js·前端框架
533_1 小时前
[element-plus] el-tabs和el-menu联动
前端·javascript·vue.js
索西引擎4 小时前
【React】JSX:JavaScript 语法扩展的本质、编译机制与表达能力分析
前端·javascript·react.js
牧濑红莉12 小时前
网络安全竞赛pwn全解及第一道ai的wp
javascript·.net
神明不懂浪漫12 小时前
【第四章】CSS(二)——文本外观属性与复合选择器
前端·css·经验分享·笔记
kyriewen12 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
顾昂_14 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
An_s15 小时前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马15 小时前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学