2

我正在尝试制作一个 giphy 克隆，目前我想展示六个热门 gif。但是，当我运行代码时，从能够从响应数据中获取图像源但实际 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]);
    }
  }
4

1 回答 1

2

那是因为当您使用 时append()，您实际上是在将实际文本而不是元素/节点附加到您的gifsContainer:

该ParentNode.append()方法在. Node_ 对象作为等效节点插入。DOMStringParentNodeDOMStringText

您应该使用构造图像元素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);
}
于 2019-04-12T20:16:58.080 回答