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

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay