EJS文件图片加载异常：/blog正常，/blog/comment/add/:blogId失败

核心问题：路由层级导致的相对路径解析错误 #

问题本质是相对路径在不同层级路由下的解析差异，再加上EJS代码的语法疏漏：

1. 两个路由层级不同：/blog 是一级路径，/blog/comment/add/:blogId 是三级嵌套路径
2. 浏览器会根据当前页面URL解析图片相对路径，导致相同路径在不同路由下请求的资源地址完全不同

具体修复步骤 #

1. 修复EJS中img标签的语法错误 #

你的viewComment.ejs里的img标签缺少双引号，会导致路径解析异常，先修正这个问题：

<% if (blog.thumbnail != '') { %>
    <img src="<%= blog.thumbnail %>" class="thumbnail" >
<% } %> 
<!-- 创作者头像同理修正 -->
<img src="<%= creator.profilePicture %>" class="card-img-top" style="height:30px; width: 30px;margin-bottom:0px">

2. 统一图片路径为绝对路径 #

如果blog.thumbnail和creator.profilePicture存储的是相对路径（比如uploads/xxx.jpg），在嵌套路由下浏览器会错误解析为/blog/comment/add/uploads/xxx.jpg，而你的静态资源挂载在blogRoute下，这个路径无法匹配到public文件夹内的资源。

两种解决方式任选其一：

• 方案A：全局挂载静态资源+存储绝对路径
  上传图片时直接存储以/开头的绝对路径（比如/uploads/xxx.jpg），同时把静态资源挂载到全局（替换原blogRoute.use(...)）：

  app.use(express.static(path.resolve("public")))
  

• 方案B：补全路由前缀
  若坚持用blogRoute挂载静态资源，在EJS渲染路径时加上/blog/前缀：

  <img src="/blog/<%= blog.thumbnail %>" class="thumbnail" >
  

3. 验证静态资源逻辑 #

全局挂载静态资源后，所有以/开头的路径都会直接去public文件夹查找，不受当前路由层级影响，能避免后续嵌套路由再出现类似问题。

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