如何显示在使用jhipster和角度的选择画面？

Question

我米试图显示在一个下拉选择框图像，我米使用JHipster及选用的角度为前端，并同时使用JDL我用ImageBlob场以产生照片实体来处理图像。

我有照片和Boxeur实体，其中Boxeur有一个照片之间的关系

我现在中号定制我的形式，所以我希望展示的图片拖曳下来，但因为我新来的角度（不超过1个月使用它，不超过3月的JS）我真的不知道如何显示在照片该selction

我成功地显示在网格中与他们的照片全部义和团

我用Google搜索，发现这是可能的使用选项的背景图像属性，但我实在不知道如何remeed吧

这里是所有具有至今

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

使用下面的解决方案通过后，马努我发现photoOption.photo是一个blob至极可以在img标签中使用，但不能作为网址为背景

如果不是有没有解决这个一个好的做法呢？

Answer 1

使用ngStyle是这样的：

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