Javascript 如何使用jhipster和angular在选项中显示图片？

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

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

我现在正在自定义我的表单，所以我希望在下拉列表中显示图像，但由于我是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>

照片
{{photoOption.id}{{photoOption.photoContentType}

我想知道如何使用我的img src得到这样的东西

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

男性

到

男性

使用Manu提供的以下解决方案后，我发现photoOption.photo是一个blob，它可以用于img标记，但不能用作背景url

如果没有，是否有解决此问题的良好做法？

请使用如下ngStyle：

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

男性

像这样使用ngStyle：

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

男性

我想使用我的srccontent@MohammedHousseynTaleb存储您的src内容，即“数据：”+photoOption.photoContentType+”；base64，“+photoOption.photo在变量中，然后在变量中使用该变量ngStyle@MohammedHousseynTaleb我已根据您的要求编辑了我的答案。仍然为空否image@MohammedHousseynTaleb示例我想使用我的srccontent@MohammedHousseynTaleb存储您的src内容，即“数据：”+photoOption.photoContentType+”；base64，“+photoOption.photo在变量中，然后在变量中使用该变量ngStyle@MohammedHousseynTaleb我已根据您的要求编辑了我的答案。仍然为空否image@MohammedHousseynTaleb例子