web-dev-qa-db-ja.com

Ionic 3- base64画像を表示し、安全でないURL値をサニタイズしますsafevalueは[property] = bindingを使用する必要があります

プロフィール写真に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>

Check this image, it't not displaying the picture

「安全でないURL値をサニタイズするにはsafevalueは[プロパティ] = bindingを使用する必要があります」というエラーが表示されます

angularimageionic-frameworkbase64ionic3
8
Shreyas Pednekar

テンプレートで使用する前に、サニタイザーを追加して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>
5
mike_t

ブラウザのサニタイザーを追加し、URLをサニタイズしてから、src = "{{your_variable}}" use [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*');
  }
}
<img [src]="user_image" />
2
ZearaeZ

データを2回保存したくない場合は、メタデータ文字列をHTMLに直接配置できます。これは私のシナリオに適しています

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

TypeScriptファイルのCameraOptionsで、FILE_URI 沿って DATA_URL このような destinationType: this.camera.DestinationType.DATA_URL

1
SANA Abdoul Aziz

URLのパブリックアドレスを入力してください。サーバーが保存されている場合は、サーバーのパブリックアドレスと画像が保存されているパスワードを入力する必要があります。

0
Antonio Posada Magdaleno