Angular加载Spring Boot返回的Base64图片遇unsafe URL安全警告求助

你遇到的这个问题我之前也踩过坑——明明用了DomSanitizer处理Base64图片URL，还是弹出安全警告，其实核心原因是HTML里的绑定方式不对，和DomSanitizer本身无关。

先看你碰到的报错：

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,

问题根源 #

Angular的插值表达式{{}}会把DomSanitizer.bypassSecurityTrustUrl()返回的SafeUrl对象直接转换成字符串，导致Angular识别不出这是已经被信任的URL，反而会把它当成不安全的普通字符串处理，所以才会弹出警告。

解决步骤 #

只需要两步就能搞定：

1. 修改HTML的图片绑定方式

把原来的插值绑定改成属性绑定，也就是把src="{{ userImage }}"换成[src]="userImage"：

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

属性绑定会直接传递SafeUrl对象给src属性，Angular会认可这个已经被信任的URL，不会再触发安全检查。

2. 修正MIME类型的大小写（可选但更规范）

你的TS代码里写的是data:Image/*;base64,，把大写的Image改成小写的image，符合MIME类型的标准写法：

this.userImage = this.sanitizer.bypassSecurityTrustUrl("data:image/*;base64," + user.image);

修改后的完整代码 #

HTML部分：

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

TypeScript部分：

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

这样改完之后，安全警告就会消失，Base64图片也能正常加载了。

内容的提问来源于stack exchange，提问作者user9800607