nodejs - How to read and output jpg image?

node.jsFilesystems

node.js Problem Overview


I've been trying to find an example of how to read a jpeg image and then show the image.

var http = require('http'), fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});

fs.readFile('image.jpg', function (err, data) {
  if (err) throw err;
  res.write(data);
});

res.end();
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Tried the following code but I think the encoding needs to be set as buffer. Using console.log it outputs 'Object' for the data.

node.js Solutions


Solution 1 - node.js

Here is how you can read the entire file contents, and if done successfully, start a webserver which displays the JPG image in response to every request:

var http = require('http')
var fs = require('fs')

fs.readFile('image.jpg', function(err, data) {
  if (err) throw err // Fail if the file can't be read.
  http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'image/jpeg'})
    res.end(data) // Send the file data to the browser.
  }).listen(8124)
  console.log('Server running at http://localhost:8124/')
})

Note that the server is launched by the "readFile" callback function and the response header has Content-Type: image/jpeg.

[Edit] You could even embed the image in an HTML page directly by using an <img> with a data URI source. For example:

  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write('<html><body><img src="data:image/jpeg;base64,')
  res.write(Buffer.from(data).toString('base64'));
  res.end('"/></body></html>');

Solution 2 - node.js

Two things to keep in mind Content-Type and the Encoding

  1. What if the file is css

    if (/.(css)$/.test(path)) { res.writeHead(200, {'Content-Type': 'text/css'}); res.write(data, 'utf8'); }

  2. What if the file is jpg/png

    if (/.(jpg)$/.test(path)) { res.writeHead(200, {'Content-Type': 'image/jpg'}); res.end(data,'Base64'); }

Above one is just a sample code to explain the answer and not the exact code pattern.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmeshView Question on Stackoverflow
Solution 1 - node.jsmaericsView Answer on Stackoverflow
Solution 2 - node.jsuser2248133View Answer on Stackoverflow