DEV Community

loizenai
loizenai

Posted on

Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-restapi-bootstrap-4-image-jquery

Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

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:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - project 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:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - results

Bootstrap 4 Image provides useful classes to style with images:

  • .rounded class adds rounded corners to an image

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - rounded shape

  • .rounded-circle shapes the image to a circle

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - circle shape

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

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - thumnail shape

More at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-restapi-bootstrap-4-image-jquery

Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay