Cant bind imageUrl in Angular

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

Well, probably `d.url` is not defined, not a valid image URL or you cannot access this URL. Check with your browsers developer tools' console and network tabs. I am guessing you have to add your API key. — rveerd, Jan 06 '21 at 15:59
url is defined you can check here https://ibb.co/XSL1qWp for confirmation, also have added my api key. if i copy the imageUrl and paste on a new tab, its display, that means its valid. — Dave Davoucii, Jan 06 '21 at 18:17
You have to verify it within the context of your application. Check the network tab if there is actually a request for the image and what the result is. Or if there are errors in the console. Also, you can test what happens when you use a hard-coded URL (``) instead of data binding (``). — rveerd, Jan 07 '21 at 07:24

score 0 · Answer 1 · answered Jan 06 '21 at 15:51

0

Try to add this in your index.html file

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

answered Jan 06 '21 at 15:51

Vasile Coman

191
1
8

Your answer would be more useful if you explain why you think this will solve the issue. – rveerd Jan 06 '21 at 16:03
I encountered this issue as well when I've used images from another website in my angular application. The URLs for images were valid but the images were not displayed. I've found this solution on the Internet but I can't remember on which website. – Vasile Coman Jan 06 '21 at 16:35
I just added that to my index.html file, but its not displaying still. – Dave Davoucii Jan 06 '21 at 18:22
Do you have any errors in the console? The request for getting the gif is failing? – Vasile Coman Jan 07 '21 at 07:56

score 0 · Accepted Answer · answered Jan 07 '21 at 10:47

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.

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.

Cant bind imageUrl in Angular

2 Answers2