在前后端分离的项目里，图片资源往往由专门的静态服务器或CDN提供，但开发初期这些接口可能还没有准备好。测试图片加载、懒加载、占位图等逻辑时，如果每次都去改代码指向真实图片或者手写一个临时后端，效率很低。一个更轻的做法是直接在本地起一个原始TCP服务，模仿Netcat的行为，当浏览器请求图片时返回一段合法的HTTP响应和图片二进制数据，这就是Mock2Image的基本思路。下面借助Node.js的net模块来实现这个工具。
Netcat与Mock2Image分别解决什么问题
Netcat是网络工具里的瑞士军刀，可以创建TCP或UDP连接，把标准输入输出和网络流对接起来。它本身不关心应用层协议，只需要你能手动发送和接收字节。而Mock2Image可以理解为一个模拟图片服务的策略，通过控制HTTP响应头和图片内容，让前端代码在开发阶段就像访问真实图片服务一样工作。将两者结合，就是借助Node.js网络编程能力，用极少的代码模拟出一个按需返回图片的HTTP端点。
选择Node.js来实现而不是直接用系统自带的netcat命令，原因在于Node.js可以更灵活地处理字符串拼接、读取本地文件以及管理多个并发连接。事件驱动模型天然适合这种需要长时间监听、偶尔响应的场景。另外Node.js的Buffer对象能方便地处理二进制图片数据，不会出现字符串编码导致的文件损坏问题。整个实现不需要Express，不需要任何第三方依赖，核心只用内置的net和fs模块。
用Node.js搭建简易Netcat图片服务
下面的代码展示了一个完整可运行的Mock2Image服务。它监听8080端口，当收到HTTP GET请求且路径为/image.png时，读取同目录下的mock.png文件，返回带有正确Content-Type和Content-Length的HTTP响应。其他路径一律返回404。代码中的正则匹配和响应头拼接都保持了足够简单的风格，方便根据实际需求快速修改。
const net = require('net');
const fs = require('fs');
const path = require('path');
const port = 8080;
const imagePath = path.join(__dirname, 'mock.png');
const server = net.createServer((socket) => {
socket.on('data', (data) => {
const request = data.toString('utf8');
const firstLine = request.split('\r\n')[0] || '';
const parts = firstLine.split(' ');
if (parts[0] === 'GET' && parts[1] === '/image.png') {
fs.readFile(imagePath, (err, imageBuffer) => {
if (err) {
socket.end('HTTP/1.1 500 Internal Server Error\r\nContent-Length: 0\r\n\r\n');
return;
}
const header = 'HTTP/1.1 200 OK\r\n' +
'Content-Type: image/png\r\n' +
'Content-Length: ' + imageBuffer.length + '\r\n' +
'Connection: close\r\n\r\n';
socket.write(header);
socket.write(imageBuffer);
socket.end();
});
} else {
socket.end('HTTP/1.1 404 Not Found\r\nContent-Length: 0\r\n\r\n');
}
});
socket.on('error', (err) => {
console.error('Socket error:', err.message);
});
});
server.listen(port, () => {
console.log('Netcat Mock2Image server running at http://127.0.0.1:' + port + '/image.png');
});
这段代码的关键在于手动构造HTTP响应。HTTP协议要求状态行、响应头和响应体之间用CRLF分隔，头部结束后还需要一个空行。Content-Length必须和实际发送的图片字节数一致，否则浏览器会等待或截断数据。图片内容用Buffer直接写入socket，不会经过UTF-8转码，因此可以保证二进制完整性。使用异步的readFile而非readFileSync，可以避免在读取大图片时阻塞事件循环。
测试方式非常简单：先准备一张名为mock.png的图片放在代码同目录下，运行node mock2image.js，然后在浏览器地址栏输入http://127.0.0.1:8080/image.png，就能看到图片正常显示。也可以使用curl命令查看响应头，确认Content-Type和Content-Length是否正确。如果前端需要模拟不同的图片尺寸或格式，只需要替换文件或扩展路由判断逻辑。
处理并发连接与多种图片格式
Node.js的net服务器默认支持多个客户端同时连接，每个socket独立触发data事件。上面的代码中，每一次data事件都可能包含一个完整的HTTP请求，但对于较大的请求或分片发送的情况，可能需要在同一个socket上缓存数据直到接收到完整的请求头。对于Mock2Image这种只处理简单GET请求的场景，通常第一次data事件就能拿到完整请求行，所以可以直接处理。但如果要确保健壮性，可以在socket上维护一个缓冲区，直到遇到\r\n\r\n再解析。
扩展多图片格式也很直接，比如根据请求路径返回不同的图片文件。可以把路径映射到本地文件名，并设置对应的Content-Type，例如.jpg对应image/jpeg，.gif对应image/gif。注意Content-Type必须和文件实际格式一致，否则浏览器可能拒绝渲染。另外还可以加入模拟网络延迟的功能，在write响应之前用setTimeout延迟几百毫秒，方便前端测试加载状态、骨架屏和错误重试逻辑。延迟时间可以通过查询参数动态控制，让Mock2Image变成一个可调的测试工具。
实际应用场景与安全注意事项
Mock2Image最适合在本地开发和持续集成环境中使用。比如前端单元测试需要验证图片加载事件的触发，或者E2E测试需要一个稳定的图片地址，都可以通过启动这个服务来提供固定内容的图片。相比mock API返回一个base64字符串再转成Blob，直接返回真实图片文件更接近生产环境行为，能覆盖更多浏览器细节。另一个好处是可以模拟不同大小的图片来测试性能，甚至生成纯色图片或占位图，完全不用依赖外部网络。
不过这个简易服务只适合受信任的本地环境，绝对不能直接暴露到公网。因为它没有处理任何安全头、没有限制请求体大小，也没有验证客户端来源。在一个公共网络里运行，任何人都可以连接并获取你的本地图片文件，还可能通过构造畸形请求导致服务异常。如果确实需要远程访问，建议增加简单的鉴权，比如校验一个自定义请求头，或者至少绑定到127.0.0.1而不是0.0.0.0。此外生产环境仍然应该使用Nginx、对象存储这类成熟的静态资源方案，Mock2Image的作用仅限于开发调试阶段。
