如何使用 jhipster 和 Angular 在选项中显示图片？答案

【问题标题】：How to show picture in option using jhipster and angular?如何使用 jhipster 和 Angular 在选项中显示图片？
【发布时间】：2019-02-08 18:38:53
【问题描述】：

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

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

我现在正在自定义我的表单，所以我希望在下拉列表中显示图像，但由于我是 Angular 新手（使用它不超过 1 个月，在 JS 中不超过 3 个月）我真的不知道如何显示选择中的照片

我成功地在网格中展示了所有拳击手的照片

我用谷歌搜索，发现使用选项的背景图像属性可以做到这一点，但我真的不知道如何补救

这就是迄今为止所拥有的一切

<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

如果没有，是否有解决此问题的好习惯？

【问题讨论】：

标签： javascript angular jhipster jdl

【解决方案1】：

像这样使用 ngStyle：

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

【讨论】：

我想使用我的 src 内容
@MohammedHousseynTaleb 将您的 src 内容，即 'data:' + photoOption.photoContentType + ';base64,' + photoOption.photo 存储在一个变量中，然后在 ngStyle 中使用该变量
@MohammedHousseynTaleb 我已根据您的要求编辑了我的答案。
还是空无图片
@MohammedHousseynTaleb 示例stackblitz.com/edit/angular-c86kqe