【问】Nodejs如何读取本地图片并显示在浏览器

【问】Nodejs如何读取本地图片并显示在浏览器

如题，我折腾了好久啊，简直是无头绪啊。。。。附上代码，各位大神帮忙看看怎么搞： var http = require(‘http’), fs = require(‘fs’);

fs.readFile(’./avatar.jpg’,‘binary’,function(err, file) { if (err) { console.log(err); return; }else{ http.createServer(function(req, res) { res.writeHead(200, {‘Content-Type’: ‘image/jpeg’}); res.write(file,‘binary’); res.end(); return; }).listen(8888); } });


12 回复

当然可以！为了实现通过 Node.js 读取本地图片并在浏览器中显示，你需要创建一个简单的 HTTP 服务器，并将读取到的图片文件发送给客户端。以下是改进后的代码及解释：

示例代码

const http = require('http');
const fs = require('fs');

// 创建 HTTP 服务器
http.createServer((req, res) => {
  // 设置响应头部信息，指定内容类型为图片
  res.writeHead(200, {'Content-Type': 'image/jpeg'});

  // 使用 fs.createReadStream 读取图片文件
  const imageStream = fs.createReadStream('./avatar.jpg');
  
  // 将图片流传递给客户端
  imageStream.pipe(res);
}).listen(8888, () => {
  console.log('Server is running on port 8888');
});

代码解释

  1. 引入模块:

    • http 模块用于创建 HTTP 服务器。
    • fs 模块用于处理文件系统操作。

  2. 创建 HTTP 服务器:

    • http.createServer() 创建一个新的 HTTP 服务器。它接受一个回调函数，该函数在每次请求时被调用。
    • 在回调函数中，首先设置响应头部信息 (res.writeHead)，告诉浏览器返回的是一个 JPEG 图片。

  3. 读取图片文件:

    • 使用 fs.createReadStream() 方法来创建一个可读流（imageStream），从文件系统中读取 avatar.jpg 文件。这种方法比直接使用 fs.readFile() 更高效，因为它允许按需读取数据，而不是一次性将整个文件加载到内存中。

  4. 将图片流传递给客户端:

    • 使用 .pipe(res) 方法将读取到的图片数据流直接传递给客户端。这会自动处理数据分块传输，并且在数据传输完成后自动关闭连接。

  5. 启动服务器:

    • server.listen(port, callback) 方法启动服务器并监听指定端口（这里是 8888）。当服务器启动后，会在控制台输出一条消息。

如何测试

  • 启动上述 Node.js 程序。
  • 打开浏览器，访问 http://localhost:8888/。你应该能看到 avatar.jpg 图片被正确显示出来。

这种方式不仅简洁，而且更加高效，适合处理大文件或高并发场景。希望这对你有帮助！


顶。

报错么？

不报错。。。各种正确。。

运行能显示啊

在linux里跑了，表示正常，node版本号：v0.10.18

我按照我刚刚理解的那个原理，试着寻址test.js上一级兄弟目录下的图片，又出不来了。。。。这。。。谁能给我讲清楚Node的寻址原理。。。

没看你的代码，但我很好奇为啥你会有这个需求？ 一般来说直接让nginx或者apache来处理静态文件不就好了吗？ 你要嫌麻烦， 直接用express处理也简单，一行代码搞定。 自己为啥要重复造蹩脚的轮子呢？

fs.createReadStream('./mypic.png').pipe(res);

运行正常

很多图片怎么办啊

为了在浏览器中显示本地图片，你可以通过Node.js创建一个简单的HTTP服务器来读取图片文件，并将其发送到客户端。以下是一个完整的示例代码，展示了如何实现这一点：

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    // 设置响应头部信息
    res.writeHead(200, {'Content-Type': 'image/jpeg'});

    // 指定图片文件路径
    const imagePath = path.join(__dirname, 'avatar.jpg');

    // 使用管道流来传输图片文件
    fs.createReadStream(imagePath).pipe(res);
});

server.listen(8888, () => {
    console.log('Server is running on port 8888');
});

解释

  1. 引入必要的模块:

    • http：用于创建HTTP服务器。
    • fs：用于文件系统操作。
    • path：用于处理和转换文件路径。

  2. 创建HTTP服务器:

    • 使用http.createServer()创建一个服务器实例，并提供一个回调函数处理请求。

  3. 设置响应头部信息:

    • 使用res.writeHead(200, {'Content-Type': 'image/jpeg'})设置响应的MIME类型为image/jpeg，这样浏览器就知道这是个图片文件。

  4. 指定图片文件路径:

    • 使用path.join(__dirname, 'avatar.jpg')构建绝对路径，指向存储在当前目录下的avatar.jpg文件。

  5. 使用管道流传输文件:

    • fs.createReadStream(imagePath)创建一个读取流，从指定的文件路径读取数据。
    • .pipe(res)将读取流直接连接到响应对象res，这样数据可以被高效地传输给客户端，而无需一次性将整个文件加载到内存中。

  6. 启动服务器:

    • server.listen(8888)让服务器监听8888端口，然后打印一条消息到控制台，表明服务器已启动。

当你运行这段代码并在浏览器中访问http://localhost:8888时，你应该能够看到avatar.jpg图片。

回到顶部