使用EJS填充img的src属性时无法加载图片的问题

给你几个直接的排查和解决步骤：

• 检查渲染后的实际路径：右键网页→查看页面源代码，对比手动写的src和变量渲染出来的src是不是完全一致。比如有没有多余的空格、换行符，或者文件名大小写不匹配（Linux服务器对文件名大小写敏感）。
• 改用绝对路径：把src里的路径改成绝对路径（前面加斜杠）：

  <img src="/images/<%= name %>">
  

  很多时候相对路径的问题出在页面路由层级上——比如你的页面是/user/123，相对路径images/xxx.jpg会被浏览器解析成/user/images/xxx.jpg，而不是你配置的静态资源根目录/images/xxx.jpg。加斜杠后会强制从网站根目录找资源。
• 验证变量的纯净度：在后端把从数据库拿到的文件名打印出来检查，比如：

  const imageName = await db.query('SELECT name FROM images WHERE id = ?', [id]);
  console.log('文件名:', imageName, '长度:', imageName.length);
  

  有时候数据库里的字符串可能带了看不见的空白字符（比如换行、制表符），虽然页面上<%= name %>看起来正常，但实际渲染到src里会导致路径错误。如果有多余字符，用trim()处理后再传给EJS：

  res.render('your-page', { name: imageName.trim() });
  

• 确认静态资源配置：再核对下express.static的配置是否正确，比如：

  app.use(express.static(path.join(__dirname, 'public')));
  

  确保你的images文件夹是在public目录下，这样/images/xxx.jpg才能被正确映射到public/images/xxx.jpg。

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