当你在浏览器中打开一个图片链接，却发现图片自动下载而不是直接显示时，这是因为服务器设置了特定的响应头。本文将用简单的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参数动态切换预览/下载模式

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