不安全：data：image / *; base64，：1 GET unsafe：data：image / *; base64，（Javascript / Angular）

Question

我从Spring Boot App中获取json中String64的图像。

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);
    });
  }
}

ERROR：

  

core.js：7909警告：清理不安全的URL值SafeValue必须使用[property] = binding：data：Image / *; base64，/ 9j / 4 ....

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

Answer 1

尝试一下：

import { TestBed } from '@angular/core/testing';

import { CustomHrefService } from './custom-href.service';
import {AppModule} from '../app.module';
import {WindowToken} from './window';
import {Injector} from '@angular/core';
import {CustomHref2Service} from './custom-href-2.service';

const MockWindow = {
  location: {
    _href: '',
    set href(url: string) {
      this._href = url;
    },
    get href() {
      return this._href;
    }
  }
};

describe('CustomHrefService', () => {
  let service: CustomHrefService;
  let setHrefSpy: jasmine.Spy;

  beforeEach(() => {
    setHrefSpy = spyOnProperty(MockWindow.location, 'href', 'set');

    const injector = Injector.create({
      providers: [
        { provide: CustomHrefService, useClass: CustomHrefService, deps: [WindowToken, CustomHref2Service]},
        { provide: CustomHref2Service, useClass: CustomHref2Service, deps: []},
        { provide: WindowToken, useValue: MockWindow}
      ]
    });
    service = injector.get(CustomHrefService);
  });

  it('should be registered on the AppModule', () => {
    service = TestBed.configureTestingModule({ imports: [AppModule] }).get(CustomHrefService);
    expect(service).toEqual(jasmine.any(CustomHrefService));
  });

  describe('#jumpTo', () => {
    it('should modify window.location.href', () => {
      const url = 'http://www.google.com';
      service.jumpTo(url);
      expect(setHrefSpy).toHaveBeenCalledWith(url);
    });
  });
});

如果仍然有问题，请确保从后端获得的图像是正确的图像。