Ionic 4 图像显示错误

Question

我正在使用 Ionic 4 (Angular) 开发一个项目。我有一个页面需要显示一些图像。 以下代码用于图像显示：

<ion-row>
  <ion-col col-12 *ngFor="let photo of photos">
    <div style="position:relative;">
      <button class="close" (click)="deletePhotoConfirmAlert(photo)" 
      style="right:0px; position: absolute; width:30px; height: 30px; 
        background-color: red; color: white">
        <span>&times;</span>
      </button>
      <img [src]="getImageSource(photo.attachmentId)">
    </div>
  </ion-col>
</ion-row>

这里的按钮作为删除图片的目的，而img标签就是图片本身。 [src] 绑定调用函数 getImageSource，它实际上是对服务器进行 API 调用，并将图像作为文件返回：

 getImageSource(attachmentId) {
    return environment.apiUrl + 'attachments/download/?id=' + attachmentId;
  }

看起来是这样的：

网页版：

手机版（iOS）：

如您所见，图片并没有在移动设备上显示，它只是一个白色的小方块。 我也在安卓设备上试过，同样的事情发生了。 我还应该提一下，如果从移动设备上传照片（拍摄相机照片），照片在设备上再次显示为白色小方块，但如果在浏览器上打开，则显示正确。

注意：图片仅用于测试目的，因此与上下文无关。

Answer 1

设置图像高度和宽度，然后重试。

 <img [src]="getImageSource(photo.attachmentId)" height="200" width="200">

或者

在浏览器中查看图片网址。