无法在 Angular 中绑定 imageUrl

Question

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

在下方查看我的代码

这里是调用 api

的方法

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 不显示？？，已经尝试了我在这里看到的所有 questions/answers，但是 none 能够解决我的问题

Answer 1

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

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

Answer 2

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

We provide various renditions of each GIF in the images object to give your users the best experience possible. Generally, it’s best to use the smaller fixed_height or fixed_width renditions on your preview grid.

无法在 Angular 中绑定 imageUrl

Cant bind imageUrl in Angular

javascript

giphy

giphy-api

angular