Блог

Главная - Вопросы по программированию - Загруженное изображение не устанавливается в угловой

Загруженное изображение не устанавливается в угловой

#angular #typescript #base64

Вопрос:

У меня есть следующее приложение (изображение ниже) В этом приложении я загружаю строки base64 из api rest для отображения изображений. первые два устанавливаются правильно, но последний не работает. Как раз перед тем, как они будут установлены, я тоже регистрирую консоль src, и она показывает мне предварительный просмотр, когда я наведу на нее курсор (рис.ниже).

Код angular (который работает для первых 2 файлов) выглядит следующим образом:

  getSessions() {
    this.sessionService.getSessions().subscribe(
      data => {
        this.sessions = data
        console.log(data),
        this.sessions.forEach(session => {
          session.sessionImgUrl = 'data:image/png;base64,'   session.sessionPhoto?.image.data;
          if(session.sessionPhoto.title == 'test') {
            console.log(session.sessionImgUrl)
          }
        })

HTML:

       <img mat-card-image height="150px" [src]="session.sessionImgUrl" alt="Photo of a Shiba Inu">

введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1.Попробуйте обработать его с помощью DomSanitiser, возможно, он проходит очистку angular.io/api/platform-browser/DomSanitizer constructor(private sanitizer: DomSanitizer) {} session.sessionImgUrl = this.sanitizer.bypassSecurityTrustResourceUrl( 'data:image/png;base64,' session.sessionPhoto?.image.data );

2. К сожалению, не работает 🙁

3. Работает ли это в этом (т. Е. Действительно ли это действительное изображение?) codebeautify.org/base64-to-image-converter

4. Да, он даже возвращается к угловому и как консоль. журнал я могу просто посмотреть предварительный просмотр

Метки: