Express.js项目HTML渲染正常但无法加载public文件夹CSS及图片资源

问题原因 #

你配置的express.static已经将public文件夹映射为静态资源根目录，服务运行时，public文件夹下的内容会直接暴露在服务的根路径下，不需要在引用路径里加上public层级。你现在写的../public/xxx是本地文件系统的相对路径，只有直接打开HTML文件时有效，运行在Express服务下会找不到对应资源。

解决方法 #

修改index.html中所有静态资源的引用路径，删除路径中的../public前缀，直接从资源根路径开始写：

需要修改的路径示例： #

• 图标引用：把href="../public/img/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png"改为href="/img/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png"
• 样式文件引用：把href="../public/css/style.css"改为href="/css/style.css"
• 所有图片引用：把src="../public/img/xxx.png"统一改为src="/img/xxx.png"
• JS文件引用：把src="../public/js/script.js"改为src="/js/script.js"

修改完成后重启服务即可正常加载所有静态资源。

内容的提问来源于stack exchange，提问作者CaptainBeast123