Express搭配EJS时img标签无法加载含括号文件名的本地图片问题

架构老林

2026-8-28

问题根因

(、)属于URL规范中的保留特殊字符，直接拼接在img标签的src路径中时，浏览器会将其识别为URL语法组成部分，而非文件名的一部分，最终发送到服务端的请求路径和本地实际存储的文件名不匹配，导致图片加载失败。手动移除括号后路径和文件名完全一致，因此可以正常加载。

解决方案

优先选择改动成本最低的方案1即可，不需要修改任何存量文件。

方案1：模板渲染时对文件名做URL编码
直接在EJS模板输出图片路径时，调用原生encodeURIComponent()方法对文件名做URL安全编码，括号会被转义为浏览器、Express都可识别的编码格式，Express静态资源服务会自动对编码后的路径做解码，精准匹配本地带括号的文件名。
修改后的EJS渲染代码：
```
<% for( list of category){ %> 
    <ul>
        <img src="/<%= encodeURIComponent(list.name) %>.jpeg" alt="<%= list.name %>">
        <li><%= list.name %></li>
    </ul>
 <% } %>
```

方案2：后端加中间件做路径兼容
如果不想修改前端模板，可以在Express静态资源配置前增加一层中间件，对图片类请求的路径做解码适配：

// 该中间件需要放在express.static配置之前
app.use((req, res, next) => {
  // 仅对图片类请求做路径兼容处理
  if (/\.(jpe?g|png|gif)$/i.test(req.path)) {
    req.url = decodeURIComponent(req.url);
  }
  next();
})

// 原有静态资源配置保持不变即可
app.use(express.static('你的本地静态资源存放目录'))

注意使用该方案需要确认静态资源目录下不存在以URL编码格式命名的文件，避免出现路径匹配冲突。