使用Pug模板引擎时Bootstrap卡片图片无法渲染求助

你当前使用Pug模板引擎搭配Bootstrap渲染卡片组件，除图片外其他功能均正常，但无论绑定model.image还是硬编码URL都无法显示图片，可按以下方向逐一排查：

• 检查静态资源路径配置
  确认图片文件存放的目录（如public/images）已被后端框架正确设置为静态资源目录，比如Express框架需添加：

  app.use(express.static('public'))
  

  硬编码测试时，使用网站根目录相对路径（如/images/test.jpg），而非相对于模板文件的路径，因为前端页面的资源路径是基于网站根目录解析的。

• 验证图片URL的有效性
  打开浏览器开发者工具的「网络」标签，查看图片请求的状态码：

  • 404：说明路径错误，检查文件是否存在、路径拼写（注意大小写、斜杠方向）；
  • 403：可能是文件/目录权限不足，调整读写权限；
  • 200但图片不显示：尝试替换一张确认完好的测试图片，排查是否为原图片文件损坏。
    同时可将图片URL直接复制到浏览器地址栏，验证能否正常访问。

• 排查Pug语法问题
  硬编码图片时确保Pug语法正确，避免转义字符干扰，示例：

  img(src='/images/your-image.jpg' class='card-img-top py-1' style='height: 10rem; object-fit: contain;')
  

  注意属性值使用普通双引号/单引号即可，无需手动转义。

• 检查CSS样式影响
  临时移除style属性中的height: 10rem和object-fit: contain，看图片是否能正常显示；同时检查card-img-top类是否被自定义样式覆盖，出现display: none或visibility: hidden等隐藏属性。

• 调试后端返回的图片路径
  在模板中添加调试代码，输出model.image的实际值：

  p 调试路径：#{model.image}
  

  确认返回的路径是否完整（如是否缺少/前缀，应为/images/xxx.jpg而非images/xxx.jpg）。

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