Express搭配Pug模板引擎项目登录注册页静态图片无法显示问题求助

• 静态资源使用相对路径引用时，浏览器会根据当前页面的访问路由路径拼接资源地址，不同层级的路由会导致拼接后的资源地址错误
• 登录注册页的资源路径同时存在两个错误：一是用了当前路径相对符./，二是缺失了images/路径层级，和public目录下的文件结构不匹配

方案1：统一静态资源引用为根路径绝对路径（推荐） #

将所有页面的图片引用路径改为以/开头的绝对路径，不管当前页面路由是什么，浏览器都会直接从站点根路径请求资源，不会出现路径拼接错误。

修改后首页pug代码示例 #

.img#menu-icon
  img(src="/images/menu-icon.svg", alt="Menu icon")
#navbarSupportedContent.collapse.navbar-collapse
  .logo
    a(href="/")
      img(src="/images/logo.png", alt="entre logo")
  ul.navUl.navbar-nav.mb-2.mb-lg-0
    li#nav-item-1.navList.nav-item
      a.navLink.nav-link.text-dark(href="#") Home
    li#nav-item-1.navList.nav-item
      a.navLink.nav-link.text-dark(href="#") Order

修改后登录注册页pug代码示例 #

.img#menu-icon
    img(src="/images/menu-icon.svg", alt="Menu icon")
  #navbarSupportedContent.collapse.navbar-collapse
    .logo
      a(href="/")
        img(src="/images/logo.png" alt="entre logo")
    ul.navUl.navbar-nav.mb-2.mb-lg-0
      li#nav-item-1.navList.nav-item
        a.navLink.nav-link.text-dark(href="#") Home
      li#nav-item-1.navList.nav-item
        a.navLink.nav-link.text-dark(href="#") Order

可选优化：调整路由命名更符合规范 #

可以去掉登录注册页路由的.pug后缀，访问路径更简洁，也能避免路径层级带来的潜在问题：

// 将原有的登录路由代码替换为以下内容
app.get('/login', (req, res)=>{
    res.status(200).render('loginandsingup.pug');
})

修改后可直接通过/login路径访问登录注册页。

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