Express配置静态目录后非根路由下静态图片无法正常加载

你现有的静态资源配置app.use(express.static(path.join(__dirname, 'public')));本身没有问题，跨路由图片加载失败的本质是图片引用使用的相对路径没有绑定网站根目录，会被浏览器按照当前页面的路由路径错误拼接。

举个实际的路径拼接逻辑方便对照：
假设你的public目录下存有图片public/images/bmw.jpg，数据库中存储的value.pic_1值为images/bmw.jpg：

当访问/index路由时，浏览器会基于当前页面URL拼接相对资源路径，最终请求地址为https://你的域名/images/bmw.jpg，刚好匹配express.static挂载的public目录下的文件，图片正常加载。
当访问/cars路由时，浏览器会基于当前的/cars路由路径拼接相同的相对资源路径，最终请求地址为https://你的域名/cars/images/bmw.jpg，这个路径不存在对应的静态文件，图片加载失败。

• 最通用无额外配置成本的改法：给所有静态资源引用加根路径前缀，将原img标签代码<img src="<%=value.pic_1%>"/>调整为<img src="/<%=value.pic_1%>"/>。这个改法不需要修改数据库中存储的资源路径值，无论后续路由是几级嵌套，浏览器都会从网站根目录开始匹配express.static配置的public下的资源，不会出现路径拼接错位的问题。
• 如果项目后续可能调整静态资源的挂载路径，可以在app.js中注入全局静态资源路径前缀：添加app.locals.staticBase = '/'，模板中统一写为<img src="<%=staticBase%><%=value.pic_1%>"/>，后续如果需要把静态资源迁移到CDN或者调整挂载目录，只需要修改这一个全局变量值即可，不需要批量修改所有模板里的资源引用路径。
• 常见排查误区：不要通过修改express.static的挂载路径试图解决这个问题，只要资源引用的相对路径没有从根目录开始，嵌套层级的路由一定会出现路径拼接错误。

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