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

图像URL可能会附加一个“文件”前缀，可以通过调用将其删除：

this.deal=normalizeURL(res);

或者也许（我不太清楚您的代码）：

this.deal.photo=normalizeURL(res);

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

ionic 3在HTML中显示图像选择器的图像或由相机捕获的图像

1 个答案: