如何使用Jhipster和Angular在选项中显示图片?

我尝试在下拉选择框中显示图像,我使用jhipster并选择angular作为前端,在使用jdl时,我使用imageblob字段生成一个照片实体来处理图片。

我在照片和拳击手有一张照片的实体之间有联系。

我现在正在定制我的表单,所以我希望在下拉列表中显示图像,但是由于我刚接触到Angular(使用它不超过1个月,JS不超过3个月),我真的不知道如何在选择中显示照片。

我成功地把所有拳击手的照片放在网格里

我在谷歌上搜索,发现使用选项的background image属性可以做到这一点,但我真的不知道如何对其进行补救。

这是迄今为止所有的东西

<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>

我想知道如何用我所拥有的img-src得到类似的东西

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

到

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

在Manu使用下面的解决方案后,我发现photooption.photo是一个blob,它可以在img标签中使用,但不能作为背景的url。

如果没有,是否有一个好的做法来解决这个问题?