небезопасные: данные: изображение / *; base64,: 1 GET небезопасные: данные: изображение / *; base64, (Javascript / Angular)

Question

Я получаю изображение в String64 в формате json из моего приложения Spring Boot.

HTML

 <img id="userImage" src="{{ userImage }}"/>

машинопись

import {Component, OnInit} from '@angular/core';
import {UserService} from "./services/user/user.service";
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private user:any;
  private userImage:any;

  constructor(private userService:UserService, private sanitizer: DomSanitizer) {}

  ngOnInit() {
    //TODO hardcoded...
    this.getUser("admin");
  }

  getUser(username) {
    this.userService.getUser(username).subscribe(user => {
      console.log(user);
      this.user = user;
      this.userImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64," + user.image);
    });
  }
}

ОШИБКА:

core.js: 7909 ВНИМАНИЕ: очистка небезопасного значения URL-адреса SafeValue должна использовать [свойство] = привязка: данные: изображение / *; base64, / 9j / 4 ....

unsafe:data:image/*;base64,:1 GET unsafe:data:image/*;base64,

Answer 1

Попробуйте это:

<img id="userImage" [src]="userImage"/>

Если у вас все еще есть проблемы, убедитесь, что изображение, полученное с бэкэнда, является правильным изображением.