当你在浏览器中打开一个图片链接，却发现图片自动下载而不是直接显示时，这是因为服务器设置了特定的响应头。本文将用简单的Node.js示例解释原因和解决方案。

为什么会自动下载？

当服务器返回以下响应头时，浏览器会触发下载行为：

// 错误设置：会导致自动下载
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename="image.jpg"');

原因分析：

1. Content-Type: application/octet-stream 告诉浏览器这是二进制数据流
2. 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 {
  // 预览模式代码...
}

总结

1. ​自动下载原因​：Content-Type设为octet-stream + Content-Disposition设为attachment
2. ​预览解决方案​：设置正确的图片MIME类型 + 使用inline模式
3. ​灵活控制​：可以通过URL参数动态切换预览/下载模式

现在你可以轻松控制图片是在浏览器中显示还是作为文件下载了！