Как показать картинку в варианте используя jhipster и angular? - PullRequest
Новая
       36

Как показать картинку в варианте используя jhipster и angular?

0 голосов
/ 08 февраля 2019

Я пытаюсь показать изображения в раскрывающемся списке выбора, я использую JHipster и выбрал угловой в качестве внешнего интерфейса, а при использовании jdl я использовал поле ImageBlob для создания объекта Photo для обработки изображений.

IУ меня есть связь между Фотографией и Компанией Боксера, где у Боксера есть одна Фотография

. Сейчас я настраиваю свои формы, поэтому хочу показать изображения в раскрывающемся списке, но так как я новичок в угловой (не более 1 месяца)используя его, не более 3-х месяцев в JS) Я действительно не знаю, как показать фотографии в селекции

Мне удалось показать все боксеры с их фотографиями в сетке

Я гуглил иобнаружил, что это возможно, используя свойство фонового изображения опции, но на самом деле я понятия не имею, как запомнить его

Вот все, что есть до сих пор 

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

после использования решения Ману ниже, я обнаружил, что фото Option.photo - это BLOB-объект, который можно использовать в теге img, но не в качестве url для фона

Если нет, то есть ли эффективная практика для решения этой проблемы?

1 Ответ

0 голосов
/ 08 февраля 2019

Используйте ngStyle следующим образом: 

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