CODEWITHSUNDEEP
javascriptimagenode.jsinvisible
TiagoM
TiagoM

Reputation: 3526

Node.js server don't show image

I am with a problem over here, I am using node.js framework to handle the requests to my index.html. The index.html file has some images, but its not appearing for my users! I am reading both files, index.html and the .png . Can you guys help me? Here is my server.js:

var app = require('http').createServer(handler)
var io = require('socket.io').listen(app)
var fs = require('fs')

app.listen(4000);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {

      return res.end('Error loading index.html');
    }

    res.end(data);

  });


  fs.readFile(__dirname + '/blackq.png', function (err, data) {
    if (err) {

      return res.end('Error loading index.html');
    }

    res.end(data);

  });


}

THanks alot in advance!

Upvotes: 1

Views: 4383

Answers (1)

Weishi Z
Weishi Z

Reputation: 1738

A quick solution just for proof of concept could go like this:

In your html file, make sure you have the img tab done right.

<img src="/your_image.jpg" alt="your_image" style="width:304px;height:228px;">

In your node.js server file, adding 

  if (req.url == "/index.html") {
  //res.end your html file
  return;
  }

  //to display image
  if (req.url == "/your_image.jpg") {

     var img = fs.readFileSync('./your_image.jpg');
     res.writeHead(200, {'Content-Type': 'image/jpg' });
     res.end(img, 'binary');

     return;

  }

Upvotes: 2

Related Questions