home.pug中添加的图片在localhost访问时无法显示如何解决

排查步骤 #

• 检查静态资源目录配置
  确认服务端框架（如Express、Koa等）的静态资源目录配置是否正确。以Express为例，若配置的静态目录为public文件夹，代码中写的/img/p1.png对应的物理路径应为项目根目录/public/img/p1.png，需确认该路径下存在对应文件，且文件名大小写、后缀完全匹配，部分操作系统对路径大小写敏感。
• 直接访问图片测试
  在浏览器地址栏直接输入http://localhost:[你的服务端口]/img/p1.png，若返回404说明资源路径错误或静态资源配置失效；返回403说明资源访问权限不足；能正常显示图片则说明问题出在pug渲染环节。
• 检查渲染后的DOM结构
  打开浏览器开发者工具的元素面板，找到对应图片节点，确认渲染后的src属性是否为预期的/img/p1.png，排除框架自动加路径前缀、特殊字符转义等问题。
• 校验图片文件有效性
  确认p1.png为未损坏的正常图片文件，不存在改后缀名伪装格式的情况。

修复方案 #

• 静态资源配置错误的情况：以Express为例，确保已正确注册静态资源中间件，示例配置如下：

  const express = require('express')
  const app = express()
  // 注册public为静态资源根目录
  app.use(express.static('public'))
  

  配置完成后在public目录下新建img文件夹，将p1.png放入该文件夹即可。
• 路径匹配错误的情况：可改用相对路径，例如页面路由为/home时，图片路径可写为../img/p1.png，也可使用框架提供的静态资源路径拼接方法生成绝对路径，避免相对路径层级写错的问题。
• pug语法错误的情况：pug对缩进要求严格，确认img标签的缩进和父元素div.banner的层级匹配，不要混合使用tab和空格，保持整个文件缩进规则（2空格/4空格）统一。
• 图片损坏的情况：替换为可用的正常png文件即可。

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