无法在 Angular 中绑定 imageUrl

如何解决无法在 Angular 中绑定 imageUrl

请大家帮帮忙！我从 https://developers.giphy.com/ 获取数据，并将它们传递给模式以供查看，除 imageUrl 外，其他所有数据都显示出来。（我做错了什么，为什么不显示 gif）

在下面检查我的代码

data = new BehaviorSubject<any>([]);


  search(event){
    this.http
       .get(
         this.searchEndpointGiphy +
           "api_key=" +
           giphyKey +
           "&q=" +
           event.target.value +
           "&limit =" +
           limit +
           "&offset=" +
           offset +
           "&rating=" +
           rating +
           "&lang=en",)
       .subscribe((gifData: any) => {
         this.data.next(gifData.data);
       }
       );
       this.modalPopUp();
   }

这里是 modalPopup 我也在此处将数据传递给我的模态


  modalPopUp() {
        const modalRef = this.modalService.open(ModalPopUpComponent);
    modalRef.componentInstance.data = this.data;
  }

最后是我的模态 html 文件

<div class = "container" *ngFor="let d of data | async">
  <div class = "row">
    <div class = "col-12 col-6">
    </div>
    <div class = "col-12 col-6">
      <div class="card">
        <img [src]="d.url" class="card-img-top img-fluid">
        <div class="card-body">
          <h5 class="card-title">{{d.title}}</h5>
        </div>

      </div>
    </div>
  </div>
</div>

请问为什么 imageUrl 不显示？？，尝试了我在这里看到的所有问题/答案，但没有一个能够解决我的问题

解决方法

尝试将其添加到 index.html 文件中

<meta name="referrer" content="no-referrer"/>

从此链接 (https://ibb.co/XSL1qWp) 中显示的屏幕截图中，我可以看到一个“图像”对象。此外，下面显示的 Giphy Docs 摘录显示您应该查看“图像”对象内部，以获取您打算显示的不同版本的 gif，我认为您应该访问图像对象而不是该 URL 字段。

我们在图像对象中提供每个 GIF 的各种再现，以尽可能为您的用户提供最佳体验。通常，最好在预览网格中使用较小的 fixed_height 或 fixed_width 再现。