nodejs - How to read and output jpg image?


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;

}).listen(8124, "");
console.log('Server running at');

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

6/22/2018 11:13:38 AM

Accepted Answer

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')
  , 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.
  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,')
10/13/2017 8:00:07 PM

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'});

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

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow