Ionic 3-显示base64图像，清理不安全的url值safevalue必须使用[property]=binding答案

【问题标题】：Ionic 3- display base64 image, sanitizing unsafe url value safevalue must use [property]=bindingIonic 3-显示base64图像，清理不安全的url值safevalue必须使用[property]=binding
【发布时间】：2018-06-05 14:32:33
【问题描述】：

我想为个人资料图片显示 base64 图像。图像作为二进制数据存储在数据库中，我使用 btoa() 将此二进制数据转换为 base64。现在我想将此base64图像绑定到img src 我尝试了很多方法，但它不起作用，请帮助这是我的代码

profile.ts 代码：

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = imageData;
    }
}

profile.html 代码：

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="data:Image/*;base64,{{displayImage}}">
</div>

显示错误“清理不安全的 url 值 safevalue 必须使用 [property]=binding”

【问题讨论】：

控制台有错误吗？
是的。错误：“清理不安全的 URL 值”
stackoverflow.com/questions/43141534/…
Angular2 Base64 sanitizing unsafe URL value的可能重复

标签： angular image ionic-framework base64 ionic3

【解决方案1】：

添加浏览器清理程序并清理 url，而不是使用 src="{{your_variable}}" 使用 [src]="your_variable"。例如：

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

@Component({
  selector: 'app-image-modal',
  templateUrl: './image-modal.page.html'],
})
export class ImageModalPage {
  user_image: SafeResourceUrl;
  constructor( private sanitizer: DomSanitizer ) { }
  
  loadImage(){
    this.user_image = this.sanitizer.bypassSecurityTrustResourceUrl(/* your base64 string in here*');
  }
}

&lt;img [src]="user_image" /&gt;

【讨论】：

【解决方案2】：

在您的打字稿文件中，在 CameraOptions 中，您可以将 FILE_URI 替换为 DATA_URL，如下所示 destinationType: this.camera.DestinationType.DATA_URL

【讨论】：

【解决方案3】：

尝试为 URL 设置一个公共地址，如果您有保存它们的服务器，则必须将服务器的公共地址和保存图像的密码输入。

【讨论】：

【解决方案4】：

如果您不想存储两次数据，可以将元数据字符串直接放在 html 中。这对我的场景更有效

<div class="profile-picture big-profile-picture">
    <img src="{{'data:image/png;base64,' + imageData}}">
</div>

【讨论】：

【解决方案5】：

在模板中使用之前添加一个清理程序并清理 url

import { DomSanitizer } from '@angular/platform-browser';

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

在您的模板中：

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>

【讨论】：