Handlebars部分页面地址自动加斜杠致图片链接失效问题求助

这种地址自动添斜杠、进而搞挂图片链接的问题我之前做项目时也踩过坑，大概率是Express的路由机制或者模板里的路径写法不一致导致的，咱们来一步步解决：

1. 先排查Express的自动重定向行为 #

Express默认有个“路由规范化”的机制：当你访问不带斜杠的路由（比如/pagename1）时，它会自动返回301重定向到带斜杠的版本（/pagename1/）。这时候如果你的图片用的是相对路径（比如src="img/logo.png"），浏览器就会把它解析成/pagename1/img/logo.png，而不是根目录下的/img/logo.png，自然就找不到资源了。

解决办法： #

• 统一路由格式：把所有Express路由都改成带斜杠的写法，同时确保前端页面里的跳转链接也一致：

  // 路由改成带斜杠
  app.get('/pagename1/', function(req, res, next) { res.render('page1'); });
  // 模板里的链接也写成带斜杠
  <a href="/pagename1/">页面1</a>
  

• 关闭自动重定向：如果不想改路由，在Express配置里开启严格路由模式，这样不带斜杠和带斜杠的路由会被视为不同路径，不会自动跳转：

  app.enable('strict routing');
  

2. 检查模板里的资源引用路径 #

那些没出问题的模板，大概率是用了绝对路径引用图片（开头带斜杠），而出问题的模板用了相对路径。比如：

• 错误写法（相对路径，会随地址变化）：

  <img src="images/photo.jpg" alt="示例图">
  

• 正确写法（绝对路径，始终指向根目录下的资源）：

  <img src="/images/photo.jpg" alt="示例图">
  

把所有出问题的模板里的图片、CSS、JS等资源引用都改成绝对路径，就能避免地址变化导致的路径解析错误。

3. 检查模板中的页面跳转链接 #

如果有些模板里的跳转链接是带斜杠的，有些是不带的，用户点击时就会触发不同的路由行为，进而出现地址加斜杠的情况。比如一个模板里写<a href="/pagename1">，另一个写<a href="/pagename1/">，访问前者就会被Express重定向到后者，导致路径变化。

解决办法就是统一所有页面跳转链接的格式，要么全带斜杠，要么全不带，保持和Express路由的写法一致。

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