DEV Community

Cover image for POC where Angular requests URL of image and Quarkus provides it through a raw copy and base64
Felipe Henrique Gross Windmoller
Felipe Henrique Gross Windmoller

Posted on • Updated on

POC where Angular requests URL of image and Quarkus provides it through a raw copy and base64

A simple POC where Angular requests the URL of an image to the Quarkus back end and then renders the image in the screen. Quarkus returns the image in two ways: (1) a simple copy from the URL of the image; (2) the image encoded in Base64 with the Media Type.

The project is available on GitHub poc-http-copy-images.

Flow of the project

Hypothetical problem to solve

Let's imagine a hypothetical situation where only the backend have access to the URL of some images and you want to render these images on the frontend.

In this POC, I propose two ways of solving this problem:

  1. The backend access the URL of the image and expose the same Response object;
  2. The backend access the URL of the image, encode it into Base64 and expose it into a JSON object with the Media Type.

Running the POC

Mock Server

Optionally, you can run a Quarkus mock server which will provide three endpoints with the below images:

*** Optionally, because you can choose any image from the internet to run the test.

Enter inside the mock-server folder and type:



$ mvn quarkus:dev -Ddebug=5006


Enter fullscreen mode Exit fullscreen mode

The swagger will be available at:

Mock-server swagger backend

Quarkus backend

Enter inside the quarkus folder and type:



$ mvn quarkus:dev -Ddebug=5006


Enter fullscreen mode Exit fullscreen mode

The swagger will be available at:

Quarkus swagger backend

Angular frontend

Enter inside the angular folder and type:



$ npm install
$ ng serve


Enter fullscreen mode Exit fullscreen mode

The front end will be available at:

http://localhost:4200/

Ok, in this screen, just put the URL of any image you desire (of the mock or the internet) and click on Load Image:

Load image menu

After clicking in the button, the image will be displayed in two columns, the left one is the raw copy from the URL and the right one is the Base64 version:

One image rendered in the frontend

Any new image searched will be shown and the previous ones will slide down:

Two images rendered in the frontend

Top comments (0)