javascript - For in 循环显示 img 标签而不是实际的 Giphy gif

Question

我正在尝试制作一个 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]);
    }
  }

Answer 1

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

The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

您应该使用 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);
}