无法在Angular中绑定imageUrl答案

【问题标题】：Cant bind imageUrl in Angular无法在Angular中绑定imageUrl
【发布时间】：2021-04-12 08:57:39
【问题描述】：

请大家帮忙！我从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 不显示？？已经尝试了我在这里看到的所有问题/答案，但没有一个能够解决我的问题

【问题讨论】：

嗯，可能d.url 没有定义，不是有效的图像 URL，或者您无法访问此 URL。检查您的浏览器开发人员工具的控制台和网络选项卡。我猜你必须添加你的 API 密钥。
url 已定义，您可以在这里查看ibb.co/XSL1qWp 进行确认，还添加了我的 api 密钥。如果我复制 imageUrl 并粘贴到新选项卡上，它的显示，这意味着它是有效的。
您必须在应用程序的上下文中对其进行验证。如果确实有对图像的请求以及结果是什么，请检查网络选项卡。或者如果控制台中有错误。此外，您可以测试使用硬编码 URL (<img src="https://...">) 而不是数据绑定 (<img [src]="...">) 时会发生什么。

标签： javascript angular giphy giphy-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果您解释为什么您认为这会解决问题，您的回答会更有用。
当我在我的 Angular 应用程序中使用来自另一个网站的图像时，我也遇到了这个问题。图片的 URL 有效，但图片未显示。我在互联网上找到了这个解决方案，但我不记得在哪个网站上。
我刚刚将它添加到我的 index.html 文件中，但它仍然没有显示。
控制台有错误吗？获取 gif 的请求失败？