Node.js+Express用Multer上传图片预览异常：URL含%20无法显示

嘿，我一眼就揪出问题所在啦！你看HTML模板里的图片路径代码：

<img src="image/ <%= file.filename %>" alt="Image">

注意到image/后面那个多余的空格了吗？这个空格就是罪魁祸首——浏览器会自动把它编码成%20，导致实际请求的URL变成image/%20xxx.jpg，服务器根本找不到对应路径的文件，自然预览失败了。

快速修复方案 #

直接删掉那个多余的空格，把代码改成：

<img src="image/<%= file.filename %>" alt="Image">

背后的原因解释 #

当模板渲染时，image/ <%= file.filename %>会生成带空格的路径（比如image/ test.jpg），而URL规则里不允许直接出现空格，浏览器会自动将其转换为%20编码字符。但你的服务器路由应该是匹配/image/:filename这类无空格的路径，带编码空格的请求自然无法命中，导致图片加载失败。

另外你可以顺便确认下服务器端的图片请求路由（比如类似下面的代码），确保它能正确解析文件名，但最核心的还是从源头去掉那个多余空格：

app.get('/image/:filename', (req, res) => {
  // 根据filename从gfs读取图片并返回的逻辑
});

改完之后，URL里的%20就会消失，图片就能正常预览啦！

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