使用express、EJS和bootstrap开发网站时浏览器无法显示图片如何解决

问题原因 #

• 静态资源路径引用错误：Express 配置 express.static 中间件指定 public 为静态资源根目录后，public 目录下的内容会直接映射到站点根路径，访问时不需要额外携带 public 目录名。
• 路径分隔符不符合Web标准：Web路径统一使用正斜杠 / 作为分隔符，你代码中使用的Windows风格反斜杠 \ 无法被浏览器正确识别。

解决步骤 #

1. 先确认Express入口文件（通常为app.js/index.js）中已配置静态资源中间件，示例配置如下：

const express = require('express')
const path = require('path')
const app = express()

// 配置public为静态资源根目录，推荐使用绝对路径写法避免相对路径错误
app.use(express.static(path.join(__dirname, 'public')))

2. 修改img标签的src属性，修正后的完整代码片段如下：

<section03>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4">
        <img src="/images/untitled.png" alt="an image">
        <a href="#" style="text-align: center;">SOME TEXT</a>
      </div>
    </div>
  </div>
</section03>

异常排查 #

如果修改后仍无法加载图片，可以打开浏览器开发者工具的「Network」面板，查看图片请求的实际路径和返回状态码：

• 若返回404：检查请求路径是否和实际文件路径匹配，同时注意非Windows环境下文件名大小写敏感，需要保证文件名大小写完全一致
• 若返回其他错误：检查静态资源中间件配置是否正确、图片文件是否有读取权限

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