В цикле отображается тег img вместо Giphy GIF - PullRequest
Новая
       26

В цикле отображается тег img вместо Giphy GIF

2 голосов
/ 12 апреля 2019

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

Я попытался использовать некоторые из различных URLи ссылки mp4, предоставленные в данных ответа, но всегда заканчиваются отображением только тега изображения.

function getTrending() {

  // Create AJAX request to get the trending gifs

  // Create the new XHR object

  let xhr = new XMLHttpRequest();

  // Call the open function with a GET-type request, url, and set async to true

  xhr.open('GET', 'http://api.giphy.com/v1/gifs/trending?&api_key=<MyApiKey>&limit=6', true);

  // Call the onload function

  xhr.onload = function() {
    // Check if the server status is 200
    if(this.status === 200) {
      // Return server response as an object using JSON.parse
      let trendingResponse = JSON.parse(this.responseText);

      // Create for in loop to insert the trending gifs into the gif container div

      for (i in trendingResponse.data) {
        gifsContainer.append("<img src='"+ trendingResponse.data[i].images.original.url+"' />")
      }

      console.log(trendingResponse.data[1]);
    }
  }

1 Ответ

2 голосов
/ 12 апреля 2019

Это потому, что когда вы используете append(), вы фактически добавляете фактический текст вместо элемента / узла к вашему gifsContainer:

Метод ParentNode.append() вставляет набор объектов Node или DOMString после последнего дочернего элемента ParentNode. DOMString объекты вставляются как эквивалентные Text узлы.

Вы должны сконструировать элемент изображения, используя new Image(), а затем добавить его вместо: 

for (i in trendingResponse.data) {
    const image = new Image();
    image.src = trendingResponse.data[i].images.original.url;

    gifsContainer.append(image);
}

Если вам удобнее использовать document.createElement(), это также возможно: 

for (i in trendingResponse.data) {
    const image = document.createElement('img');
    image.src = trendingResponse.data[i].images.original.url;

    gifsContainer.append(image);
}
...