ionic 3 显示图像选择器的图像或在 html 中通过相机捕获

Question

我需要在 .html 中显示捕获图片或选定图片的图像。这就是我的显示方式，但在此它的照片显示错误未定义。我尝试使用照片：任何；照片：字符串；但没有解决。

<ion-grid>
        <ion-row>
                <ion-col col-12 text-center>
                  <ion-img (click)="setImage()" style="width:120px;height:120px"  [src]="deal?.photo || 'https://cdn.dribbble.com/users/21845/screenshots/3938419/placeholder.png'" height="120px"></ion-img>    
                </ion-col>
              </ion-row>
</ion-grid>

.ts

takePicture() {
this.camera.getPicture(this.options).then((imageData) => {
  this.helper.load();

  let id=Date.now();
  const image = `data:image/jpeg;base64,${imageData}`;
  const pictures = this.storage.ref('deal/'+id);
  pictures.putString(image, 'data_url').then((r: UploadTaskSnapshot) => {
      r.ref.getDownloadURL().then(res=>{
       this.deal=res;  // here is the image i want to show 
       this.helper.dismiss();
      })

  }, err => {
    console.log(err);
    this.helper.toast(err);
    this.helper.dismiss();
  });

}, (err) => {
  console.log(err);

});
}

我正在使用某个代码。以前它使用 this.deal.photo = res 。这也在努​​力上传到firebase，但显示未定义的错误照片。当我删除照片时，它的工作但没有在 .html 中显示图像。

我需要知道如何在 home.html 中显示交易，以前我显示像 [src]="deal?.photo" 我做的像 [src]="deal" 所以它显示一些令牌错误

Answer 1

图片网址可能附加了一个“文件”前缀，可以通过调用删除：

this.deal=normalizeURL(res);

或者也许（我不能从你的代码中完全看出）：

this.deal.photo=normalizeURL(res);

您可以阅读有关 normalizeURL here 的信息。