我正在尝试在下拉选择框中显示图像。我使用 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
如果没有,是否有解决此问题的良好做法?
最佳答案
像这样使用 ngStyle:
<option [ngStyle]="{'background-image':'url(data:' + photoOption.photoContentType + ';base64,' + photoOption.photo + ')'}">male</option>
关于javascript - 如何使用 jhipster 和 Angular 在选项中显示图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54583545/