Отображение изображения GIF из URL, полученного в ответе массива JSON

Question

Я получаю массив JSON в ответ от внешнего API, который содержит список GIF-файлов.Теперь у меня есть URL-адреса GIF как часть этого ответа, которые я хочу показать в виде изображений на HTML-странице углового интерфейса.

Я пытался перебрать ответ, используя, но это не сработало.

JSON response

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

Я просто хочу, чтобы список изображений (скажем, 20), поступающих в качестве ответа, отображался в режиме столбца строки в пользовательском интерфейсе.

Answer 1

Я получил фактический URL-адрес изображения в формате GIF, получив полную информацию об ответе JSON.

Чтобы отобразить его, просто вызовите полный URL-адрес изображения,

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