How to show picture in option using jhipster and angular?

Question

I'm trying to show images in a dropdown selection box. I'm using JHipster and chose Angular as frontend, and while using jdl I used the ImageBlob Field to generate a Photo entity to handle pictures.

I have a relation between the Photo and Boxeur Entity where the Boxeur have one Photo

I'm customizing my forms now so I desire to show images in the drop down but since I'm new to Angular (no more than 1 month using it, no more than 3 months in JS) I really don't know how to show the Photos in the selection

I succeeded in showing all Boxers with their photos in a grid

I googled and find that this is possible using the background image property of the option but really I have no clue how to remedy it

Here is All that Have till now

<div class="form-group">
    <label class="form-control-label" jhiTranslate="boxingApp.boxeur.photo" for="field_photo">Photo</label>
    <select class="form-control" id="field_photo" name="photo" [(ngModel)]="boxeur.photoId">
        <option [ngValue]="null"></option>
        <option [ngValue]="photoOption.id" *ngFor="let photoOption of photos; trackBy: trackPhotoById">
            {{photoOption.id}} {{photoOption.photoContentType}}
            <div>
                <img [src]="'data:' + photoOption.photoContentType + ';base64,' + photoOption.photo"
                style="max-height: 30px;" alt="photo image" />
            </div>
        </option>
    </select>
</div>

I want to know how to get something like this using what I have as img src

<option style="background-image:url(male.png);">male</option>

to

<option style="background-image:url([src]="'data:' + photoOption.photoContentType + ';base64,' + photoOption.photo");">male</option>

after using the solution below by Manu I discover that photoOption.photo is a blob which can be used in img tag but not as URL for background

If not is there a good practice to resolve this?

Answer 1

Use ngStyle like this:

<option [ngStyle]="{'background-image':'url(data:' + photoOption.photoContentType + ';base64,' + photoOption.photo + ')'}">male</option>