Небезопасно: data: image / *; base64,: 1 GET unsafe: data: image / *; base64, (Javascript / Angular)

Я получаю изображение в 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.info(user);
      this.user = user;
      this.userImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64," + user.image);
    });
  }
}

ОШИБКА:

core.js:7909 WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:Image/*;base64,/9j/4....

unsafe:data:image/*;base64,:1 GET unsafe:data:image/*;base64,
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
537
1

Ответы 1

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

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

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

Другие вопросы по теме