Question

我已经使用newsapi.org成功实现了一个API，它运行良好。但是，我所拥有的信息只是文本，并且想要为每个标题添加图像。不知道如何做到这一点，因为头条新闻显然在变化。

JSON文件中有一个urlToImage标记，大概是我需要实现它的。您将从我的代码中看到我已经开始实现这一点，但无济于事。

非常感谢任何有关实施此项目的帮助。

jQuery

    $(document).ready(function() {
  $.ajax({
    url: "https://newsapi.org/v2/top-headlines?sources=mtv-news&apiKey=XXXXXX",
    method: "GET",
    success: function(data) {
      processData(data);
    }
  });

  function processData(data) {
    var articleItems = [];
    for (var i = 0; i < data.articles.length; i++) {

      var author = data.articles[i].author;
      var title = data.articles[i].title;
      var description = data.articles[i].description;
      var urlToImage = data.articles[i].urlToImage;
      var artUrl = data.articles[i].url;


      var $author = $('<div class="author">Author: ' + author + "</div >");
      var $title = $("<a href=" + artUrl + '><div class="title">' + title + "</div ></a>");
      var $description = $("<a href=" + artUrl + '><div class="description">' + description + "</div ></a>");
      var $urlToImage = $("<a href=" + artUrl + '><img class="urlToImage" src">')
      $("#entertainment_news").append($author, $title, $description, $urlToImage);
      $("#entertainment_news").append("<br />");

      console.log(artUrl);
    }
  }
});

HTML

<div class="tab-pane fade" id="entertainment">
        <h3>ENTERTAINMENT</h3>
        <p id="entertainment_news"></p>
      </div>

Answer 1

不应该是src是urlToImage而不是你现在拥有它的类吗？

Answer 2

append()只接受一个参数，你有4个jQuery对象。放弃在jQuery对象中包装HTML，并将它们作为常规字符串。

var $author = '<div class="author">Author: ' + author + '</div >';
var $title  = '<a href=' + artUrl + '><div class="title">' + title + '</div ></a>';
var $description = '<a href=' + artUrl + '><div class="description">' + description + '</div ></a>';

您还缺少图片的src属性的源路径。假设它是urlToImage，你可以这样做：

var $urlToImage = '<a href=' + artUrl + '><img class="urlToImage" src=' + urlToImage + '>;

然后在您的第一个append()电话中执行此操作：

$("#entertainment_news").append($author + $title + $description + $urlToImage);

从News API附加图像

2 个答案: