当你在浏览器中打开一个图片链接，却发现图片自动下载而不是直接显示时，这是因为服务器设置了特定的响应头。本文将用简单的Node.js示例解释原因和解决方案。
为什么会自动下载？
当服务器返回以下响应头时，浏览器会触发下载行为：
// 错误设置：会导致自动下载
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename="image.jpg"');
原因分析：
Content-Type: application/octet-stream 告诉浏览器这是二进制数据流Content-Disposition: attachment 明确指示浏览器应该下载文件
如何改为预览模式？
要让图片直接在浏览器中显示，只需修改响应头：
// 正确设置：实现预览
const ext = path.extname(filename).toLowerCase();
const mimeTypes = {
'.jpg': 'image/jpeg',
'.png': 'image/png',
'.gif': 'image/gif'
};
res.setHeader('Content-Type', mimeTypes[ext] || 'image/jpeg');
res.setHeader('Content-Disposition', 'inline; filename="image.jpg"');
完整Node.js示例
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
const filename = 'example.jpg';
const filePath = path.join(__dirname, filename);
// 设置预览模式
const ext = path.extname(filename).toLowerCase();
res.setHeader('Content-Type', {
'.jpg': 'image/jpeg',
'.png': 'image/png'
}[ext] || 'image/jpeg');
res.setHeader('Content-Disposition', 'inline; filename="' + filename + '"');
fs.createReadStream(filePath).pipe(res);
});
server.listen(3000);
如何实现预览/下载切换？
如果你想根据需求切换预览和下载模式：
// 通过URL参数控制模式
// 示例URL: http://localhost:3000/image.jpg?mode=download
const url = new URL(req.url, `http://${req.headers.host}`);
const mode = url.searchParams.get('mode') || 'preview';
if (mode === 'download') {
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename="' + filename + '"');
} else {
// 预览模式代码...
}
总结
自动下载原因：Content-Type设为octet-stream + Content-Disposition设为attachment预览解决方案：设置正确的图片MIME类型 + 使用inline模式灵活控制：可以通过URL参数动态切换预览/下载模式
现在你可以轻松控制图片是在浏览器中显示还是作为文件下载了！