NodeJS/Express – Bootstrap Image example

In the tutorial, we show how to display image from NodeJS/Express Rest Apis using Bootstrap Image.

Related posts:
How to build NodeJS/Express Bootstrap views
NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests
Bootstrap 4 Card Images – NodeJS/Express RestAPIs

Goal

We create a NodeJS/Express project as below:

/NodeJS-Express-Bootstrap-Image
	/node_modules
	/resources
		/static
			/image
				jsa_about_img.jpg
			/js
				jquery.js
	/views
		index.html
		404.html
	app.js
	package.json

To send file/image with NodeJS/Express, we can use:

 
app.get("/api/image", function(req,res){
	return res.sendFile(__dirname + "/resources/static/image/jsa_about_img.jpg");
});

-> Run above NodeJS application & result:

Bootstrap-Image-NodeJS-Express-results-demo

Bootstrap provides useful classes to style with images.
.img-rounded class:

Bootstrap-Image-NodeJS-Express-rounded-corners

.img-circle class:

Bootstrap-Image-NodeJS-Express-Circle-Image

.img-thumbnail class:

Bootstrap-Image-NodeJS-Express-thumbnails

– With Bootstrap .img-responsive class, images will be automatically responsive with every screen sizes. .img-responsive class applies : block, max-width: 100% and height: auto to the image display.
– We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:

Bootstrap-Image-NodeJS-Express-image-gallary

Practice

Setting up NodeJS/Express project

Create folder: NodeJS-Express-Bootstrap-Image & init nodejs application:

mkdir NodeJS-Express-Bootstrap-Image
cd NodeJS-Express-Bootstrap-Image

See prompts:

NodeJS-Express-Bootstrap-Image>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs-express-bootstrap-image)
version: (1.0.0)
description: NodeJS-Express-Display-Image-with-Bootstrap-View
entry point: (index.js) app.js
test command:
git repository:
keywords: NodeJS, Express, Bootstrap-Image
author: grokonez.com
license: (ISC)
About to write to C:\Users\pc\Desktop\nodejs\NodeJS-Express-Bootstrap-Image\package.json:

{
  "name": "nodejs-express-bootstrap-image",
  "version": "1.0.0",
  "description": "NodeJS-Express-Display-Image-with-Bootstrap-View",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "NodeJS",
    "Express",
    "Bootstrap-Image"
  ],
  "author": "grokonez.com",
  "license": "ISC"
}


Is this ok? (yes) yes

Install Express:

npm install express --save

-> package.json file:

{
  "name": "nodejs-express-bootstrap-image",
  "version": "1.0.0",
  "description": "NodeJS-Express-Display-Image-with-Bootstrap-View",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "NodeJS",
    "Express",
    "Bootstrap-Image"
  ],
  "author": "grokonez.com",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}
Implement Bootstrap view

./views/index.html file:


 


	  NodeJS/Express RestAPI
	  
	  
	  %MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd616%%MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd617%%MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd618%

 

1. Bootstrap Image - NodeJS/Express ResAPI

2. Bootstrap Image Gallery

%MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd619%

/views/404.html file:




  404 error
  
  
  %MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd620%%MINIFYHTMLd1992fdd8ed7a4aadcc137eae5f77fd621%

  

404 Error!

PAGE NOT FOUND

Implement Jquery to manipulate image

./resources/static/js/jquery.js file:

$( document ).ready(function() {
	$("#roundedCornersBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-rounded img-responsive');
	});
	
	$("#circleBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-circle img-responsive');
	});
	
	$("#thumbnailBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-responsive');
	});
})
Implement Express Routes

app.js file:

var express = require("express");
var app = express();
 
var router = express.Router(); 
app.use(express.static('resources'));
 
var path = __dirname + '/views/';
 
router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});
 
app.get("/",function(req,res){
  res.sendFile(path + "index.html");
});
 
app.get("/api/image", function(req,res){
	return res.sendFile(__dirname + "/resources/static/image/jsa_about_img.jpg");
});
 
app.use("/",router);
 
app.use("*",function(req,res){
  res.sendFile(path + "404.html");
});
 
app.listen(8081, function () {
  console.log('Example app listening on port 8081!')
})

Sourcecode

NodeJS-Express-Bootstrap-Image



By grokonez | May 4, 2018.

Last updated on February 6, 2020.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*