In the tutorial, JavaSampleApproach will show how to show images on web-view from Kotlin SpringBoot RestAPI with Bootstrap 4 Image and Jquery.

I. Technologies

– Java 1.9
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap 4
– Kotlin 1.1.61
– Spring Boot – 1.5.9.RELEASE

II. Goal

We create a SpringBoot project as below structure:

We create a Kotlin RestAPI:

@GetMapping(value = "/api/image")
fun getImage(): ResponseEntity{

	val imgFile = ClassPathResource("image/jsa_about_img.png")

	return ResponseEntity
			.ok()
			.contentType(MediaType.IMAGE_JPEG)
			.body(InputStreamResource(imgFile.getInputStream()))
}

We use Bootstrap 4 Image to style data on web-view, with results:

Bootstrap 4 Image provides useful classes to style with images:
– .rounded class adds rounded corners to an image

– .rounded-circle shapes the image to a circle

– .img-thumbnail shapes the image to a thumbnail (bordered)

We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:

Bootstrap 4 Aligning Images with 2 classes: {.float-right, .float-left}

Bootstrap 4 Responsive Images with .img-fluid class that applies max-width: 100% and height: auto.

III. Practice

Step to do:
– Create Kotlin SpringBoot project
– Create index controller
– Implement Kotlin RestAPI
– Create index.html view
– Create JQuery script

1. Create Kotlin SpringBoot project

Use SpringToolSuite to create a Kotlin SpringBoot project with dependencies:

	
		org.springframework.boot
		spring-boot-starter-thymeleaf
	
	
		org.springframework.boot
		spring-boot-starter-web
	
	
		org.jetbrains.kotlin
		kotlin-stdlib-jre8
		${kotlin.version}
	
	
		org.jetbrains.kotlin
		kotlin-reflect
		${kotlin.version}
	

	
		org.springframework.boot
		spring-boot-starter-test
		test
	



	${project.basedir}/src/main/kotlin
	${project.basedir}/src/test/kotlin
	
		
			org.springframework.boot
			spring-boot-maven-plugin
		
		
			kotlin-maven-plugin
			org.jetbrains.kotlin
			${kotlin.version}
			
				
					spring
				
				1.8
			
			
				
					compile
					compile
					
						compile
					
				
				
					test-compile
					test-compile
					
						test-compile
					
				
			
			
				
					org.jetbrains.kotlin
					kotlin-maven-allopen
					${kotlin.version}
				
			
		
	

2. Create Index controller

package com.javasampleapproach.bootstrap4image.controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
class WebController {
	
	@GetMapping(value="/")
    fun homepage(): String{
        return "index"
    }
}

3. Implement Kotlin RestAPI

package com.javasampleapproach.bootstrap4image.controller

import org.springframework.core.io.ClassPathResource
import org.springframework.core.io.InputStreamResource
import org.springframework.http.MediaType
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class RestAPI {
	
    @GetMapping(value = "/api/image")
    fun getImage(): ResponseEntity{
 
        val imgFile = ClassPathResource("image/jsa_about_img.png")
 
        return ResponseEntity
                .ok()
                .contentType(MediaType.IMAGE_JPEG)
                .body(InputStreamResource(imgFile.getInputStream()))
    }
}

4. Create index.html view

 


	  
      
  	  
	  %MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf220%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf221%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf222%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf223%

 
1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI

	

		
	        
	        

	          
JSA-About Image
	        
	    
	
	

  		Rounded Corners
  		Circle
  		Thumbnail
	

2. Bootstrap 4 Image Gallery

  

    

      
        
        

          
JSA-About img-rounded
        
      
    
  
  

    

      
        
        

          
JSA-About img-circle
        
      
    
  
  

    

      
        
        

          
JSA-About img-thumbnail
        
      
    
  

3. Bootstrap 4 Aligning Images

     
	 
%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf224%

5. Create JQuery script

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

IV. Sourcecode

KotlinSpringBootstrap4Image