无法在 Angular 中绑定 imageUrl

Question

Please help guys! I'm getting datas from https://developers.giphy.com/ , and passing them to a modal for viewing, every other data is showing except for imageUrl. (what I'm I doing wrong, why wont the gif show)

Check below for my code

here is the method calling the 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();
   }

here is the modalPopup am also passing data to my modal here

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

finally my modal html file

<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>

Please why is the imageUrl not displaying??, Have tried all the questions/answers I saw here, but none was able to fix my problem

Answer 1

Try to add this in your index.html file

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

Answer 2

From the screenshot shown in this link ( https://ibb.co/XSL1qWp ), I can see an "images" object. Also, the extract shown below from Giphy Docs shows you should look inside the "images" object for different versions of the gif you intend to display, I think you should access the images object instead of that URL field.

2. 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.