Question

我正在尝试克隆一个giphy，现在我想显示六种趋势gif。但是，当我运行代码时，从能够从响应数据中获取图像源，但未显示实际gif的意义上，它似乎可以正常工作。

我尝试使用响应数据中提供的一些不同的url和mp4链接，但是最终总是只显示image标签。

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]);
    }
  }

Answer 1

这是因为当您使用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);
}

对于循环显示img标签而不是实际的Giphy gif

1 个答案: