{"id":5315,"date":"2023-07-18T22:51:12","date_gmt":"2023-07-19T03:51:12","guid":{"rendered":"https:\/\/www.incredigeek.com\/home\/?p=5315"},"modified":"2023-07-18T22:51:12","modified_gmt":"2023-07-19T03:51:12","slug":"how-to-display-pictures-on-nodejs-http-server","status":"publish","type":"post","link":"https:\/\/www.incredigeek.com\/home\/how-to-display-pictures-on-nodejs-http-server\/","title":{"rendered":"How to Display Pictures on NodeJS http Server"},"content":{"rendered":"\n

If you are using http for a NodeJS application, you may have run into an issue where none of your images are loading on a site. Instead you are greeted with nice little “no image” logos.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The issue is that our NodeJS server has not been instructed to load anything other than index.html. So other things like images, or even CSS from our style.css file wont work properly.<\/p>\n\n\n\n

To fix the issue, we need to to tell NodeJS what to do when other files are requested. As a side note, the person browsing the site may not be requesting the resources directly, but index.html file requests the css file or images hence creating a new web request.<\/p>\n\n\n\n

Let’s say we are starting with the following code as a starting point.<\/p>\n\n\n\n

var http = require('http')\nvar fs = require('fs')\nvar path = require('path')\nvar url = require('url')\n\nhttp\n  .createServer(function (req, res) {\n    let pathname = url.parse(req.url).pathname\n    if (\n      req.method === 'GET' &&\n      (pathname === '\/' || pathname === '\/index.html')\n    ) {\n      res.setHeader('Content-Type', 'text\/html')\n      fs.createReadStream('.\/index.html').pipe(res)\n      return\n    }\n    return res.end()\n  })\n  .listen(3000)<\/code><\/pre>\n\n\n\n
Our HTML code is very basic.<\/p>\n\n\n\n
<html>\n<head>Hello World!<\/head>\n<br \/>\n<body><img src=\".\/image.png\" width=\"128\"><\/body>\n<\/html><\/code><\/pre>\n\n\n\n
When we launch our server with <\/p>\n\n\n\n
$ node server.js<\/pre>\n\n\n\n
We get<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
The Fix<\/h2>\n\n\n\n
Essentially what we need to do is tell the server what to do when image.png is requested.<\/p>\n\n\n\n
So we can add the following to our server code before the line “return res.end()”<\/p>\n\n\n\n
    if (req.method === 'GET' && pathname === '\/image.png') {\n      res.setHeader('Content-Type', 'image\/png')\n      fs.createReadStream('.\/image.png').pipe(res)\n      return\n    }<\/code><\/pre>\n\n\n\n
And voila! it is fixed!<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Taking it Further<\/h2>\n\n\n\n
We can improve on this and add a favicon, as well as our style sheet.<\/p>\n\n\n\n
var http = require('http')\nvar fs = require('fs')\nvar path = require('path')\nvar url = require('url')\n\nhttp\n  .createServer(function (req, res) {\n    let pathname = url.parse(req.url).pathname\n    if (\n      req.method === 'GET' &&\n      (pathname === '\/' || pathname === '\/index.html')\n    ) {\n      res.setHeader('Content-Type', 'text\/html')\n      fs.createReadStream('.\/index.html').pipe(res)\n      return\n    }\n    if (req.method === 'GET' && pathname === '\/image.png') {\n      res.setHeader('Content-Type', 'image\/png')\n      fs.createReadStream('.\/image.png').pipe(res)\n      return\n    }\n\n    if (req.method === 'GET' && pathname === '\/favicon.ico') {\n      res.setHeader('Content-Type', 'image\/x-icon')\n      fs.createReadStream('.\/favicon.ico').pipe(res)\n      return\n    }\n\n    if (req.method === 'GET' && pathname === '\/style.css') {\n      res.setHeader('Content-Type', 'text\/css')\n      fs.createReadStream('.\/style.css').pipe(res)\n      return\n    }\n    return res.end()\n  })\n  .listen(3000)<\/code><\/pre>\n\n\n\n
This will let us put a favicon.ico image to use as a favicon it will use style.css to stylize the website.<\/p>\n\n\n\n
We should note that while the above code does work, you will most likely want to use something like express.
https:\/\/github.com\/expressjs\/express<\/a><\/p>\n\n\n\n
You can also find better code implementations others of done online.<\/p>\n\n\n\n
https:\/\/stackoverflow.com\/questions\/5823722\/how-to-serve-an-image-using-nodejs<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
If you are using http for a NodeJS application, you may have run into an issue where none of your images are loading on a site. Instead you are greeted with nice little “no image” logos. The issue is that … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1460,792],"tags":[391,357,1532,498,1437,1463,1471,1436,606,1531],"class_list":["post-5315","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-http","tag-https","tag-ico","tag-image","tag-javascript","tag-js","tag-node","tag-nodejs","tag-programming","tag-webserver"],"_links":{"self":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/comments?post=5315"}],"version-history":[{"count":5,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5315\/revisions"}],"predecessor-version":[{"id":5322,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5315\/revisions\/5322"}],"wp:attachment":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/media?parent=5315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/categories?post=5315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/tags?post=5315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}