Node/Express静态文件服务异常：二级路径资源404问题排查

问题根源 #

你用相对路径images/image1.jpg引入图片时，浏览器会根据当前页面URL自动解析路径：

• 访问一级路径localhost:3000/products时，相对路径会被解析为localhost:3000/images/image1.jpg，刚好匹配Express配置的public静态资源目录，所以能正常加载；
• 访问二级路径localhost:3000/products/details时，浏览器会把相对路径解析成localhost:3000/products/images/image1.jpg，但你的图片实际存在public/images/下，对应正确URL是localhost:3000/images/image1.jpg，因此返回404。

解决办法 #

这里给你几个直接有效的方案：

• 改用根路径开头的绝对路径：把图片的src改成/images/image1.jpg。不管当前页面在哪个层级，浏览器都会从网站根目录开始查找资源，完美匹配静态资源的实际位置。
• 设置<base>标签统一基准路径：在页面的<head>标签里添加<base href="/">。这样页面中所有相对路径都会以根目录为基准解析，不用逐个修改资源引用路径。
• （可选）挂载静态资源到虚拟路径：如果需要给静态资源加统一前缀，可以修改Express配置为app.use('/static', express.static(path.join(__dirname, 'public')));，然后图片src改成/static/images/image1.jpg。

内容的提问来源于stack exchange，提问作者Jean-Sébastien Lasne