Question

我从外部API（其中包含GIF列表）获取JSON数组作为响应。现在，我将GIF URL作为此响应的一部分，希望将其显示为Angular前端html页面上的图像。

我尝试使用遍历响应，但这似乎不起作用。

JSON响应

0: {…}

analytics: Object { onload: {…}, onclick: {…}, onsent: {…} }

bitly_gif_url: "https://gph.is/YC1q17"

bitly_url: "https://gph.is/YC1q17"

content_url: ""

embed_url: "https://giphy.com/embed/6XeQfKBcO3K6c"

id: "6XeQfKBcO3K6c"

images: Object { fixed_height_still: {…}, original_still: {…}, fixed_width: {…}, … }

import_datetime: "1970-01-01 00:00:00"

is_sticker: 0

rating: "g"

slug: "hello-waving-movie-6XeQfKBcO3K6c"

source: ""

source_post_url: ""

source_tld: ""

title: "ryan gosling hello GIF"

trending_datetime: "2017-02-27 21:45:01"

type: "gif"

url: "https://giphy.com/gifs/hello-waving-movie-6XeQfKBcO3K6c"

username: ""

我只希望在UI中以行列模式显示作为响应的图像列表（例如20）。

Answer 1

通过获取完整的JSON响应详细信息，我获得了实际的GIF图片网址。

要显示该图像，只需调用图像的完整URL，

<div class="gifs-card-container"  *ngFor="let item of data">
  <img src={{item.images.original.url}}>
</div>

从URL显示的GIF图像已检索为JSON数组响应

1 个答案: