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

Question

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

1

Я пытаюсь сделать клон цыган и хочу показать шесть самых популярных картинок на данный момент. Тем не менее, когда я запускаю код, кажется, что он работает нормально в том смысле, что он может извлечь источник изображения из данных ответа, но фактический 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]);
    }
  }

PhysicsLemur 12 апр. 2019, в 22:22

Источник

Теги:

javascript

api

giphy-api

2 ответа

Ещё вопросы

Terry · Answer 1 · 2019-04-12T19-52-00.000Z

Это потому, что когда вы используете append(), вы фактически 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);
}

Спасибо большое за помощь. Это решило проблему.

Gonzalo.- · Answer 2 · 2019-04-12T19-33-00.000Z

Вам нужно расшифровать ваши URL. Это пример ваших URL:

https://media0.giphy.com/media/1nR6zXNU84YAuK3KUu/giphy.gif

Смотрите, что / сбежали. Это позволит вам получить правильные URL-адреса.

decodeURI(trendingResponse.data[i].images.original.url)

Другая проблема заключается в том, что append просто добавляет строку - см. Документацию

Я не знаю, используете ли вы jQuery или нет. Предположим, что нет, вот пример. Учитывая, что это всего 6, это нормально использовать innerHTML. Если есть еще изображения для добавления, вы можете построить всю строку HTML и добавить их в одну строку.

let response = {
  data: [{
    original:{
      url:"https:\/\/media0.giphy.com\/media\/1nR6zXNU84YAuK3KUu\/giphy.gif",
    }
  }]
};

document.getElementById('container').innerHTML += '<img src="${decodeURI(response.data[0].original.url)}" />';

<div id="container"></div>