javascriptangulargiphygiphy-api

Cant bind imageUrl in Angular

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

Solution

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

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