Google Feed API - 无法从Feed加载图片

时间:2015-08-20 16:11:22

标签: javascript jquery rss google-feed-api

我正在尝试使用Google Feed Api在网站中加载多个Feed。 我有问题将图像加载到我的Feed并且无法找到解决方案。 enybody可以帮助我吗?下面是一个codepen。

Feed有这个标记:

<img>http://img.ephoto.sk/images/content/articles/c285367e4e39cfa8056f2c95ec715f76c1e758af.jpg</img>

JS代码:

function parseFeed(url, container) {
$.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(url), // "num=5" will show 5 articles
    dataType: 'json',
    success: function (data) {
        // log object data in console
        console.log(data.responseData.feed);
        // for each entry... *
        $.each(data.responseData.feed.entries, function (key, value) {
            var title = '<li><a class="title" href="' + value.link + '" target="_blank">' + value.title + '</a></li>';
                    var image = '<img class="thumbnail" src="' + value.img + '">';
            var entry = '<div class="entry"><ul>' + image + title +  '</ul></div>';
            // * append entire entry in container
            $(container).append(entry);
        });
    },
    // if there's an error... *
    error: function (errorThrown) {
        // * log error message in console
        console.log(errorThrown);
        // * show error message
        alert('Niekde vo feede sa vyskytla chyba.');
    }
});
}
$(document).ready(function () {
    parseFeed('http://feeds.feedburner.com/FotoportlEphotosk-FotoFotografieFotoaparty', '#ephoto');
});

Codepen: http://codepen.io/MichalSK/pen/rVEwPy

是否还有任何解决方案可以使此代码与此标记一起使用?

<image>
<url>http://...</url>
<title>Lorem ipsum</title>
<pubDate>Wed, 19 Aug 2015 13:00:00 +0200</pubDate>
<link>http://...</link>
</image>

我希望这也有助于其他想要使用Google Feed Api的人。

1 个答案:

答案 0 :(得分:0)

您确定在data.responseData.feed.entries参数中有img参数吗?您的value.link正在从data.responseData.feed.entries的参数中获取链接参数的值,但您没有“img”参数来获取其值

var image = '<img class="thumbnail" src="' + value.img + '">';

因此,在获取未定义的参数之前,您需要在正在加载的data对象中存储图像的链接。

下面的代码显示了图像,因为这些图像有定义的链接。在data.responseData.feed.entries.value中,没有img参数来获取其值的链接

function parseFeed(url, container) {
$.ajax({
    url: document.location.protocol 
         + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' 
         + encodeURIComponent(url), // "num=5" will show 5 articles
    dataType: 'json',
    success: function (data) {
        // log object data in console
        console.log(data.responseData.feed);
        // for each entry... *
        $.each(data.responseData.feed.entries, function (key, value) {
            //valid link to image source                
            var img = "http://rocketdock.com/images/screenshots/Debian-Logo.png"
            var title = '<li><a class="title" href="' + value.link 
            + '" target="_blank">' + value.title + '</a></li>';
            var image = '<img class="thumbnail" src="' + img + '">';
            var entry = '<div class="entry"><ul>' + image + title +  '</ul></div>';
            // * append entire entry in container
            $(container).append(entry);
        });
    },
    // if there's an error... *
    error: function (errorThrown) {
        // * log error message in console
        console.log(errorThrown);
        // * show error message
        alert('Niekde vo feede sa vyskytla chyba.');
    }
});
}
$(document).ready(function () {
   parseFeed('http://feeds.feedburner.com/FotoportlEphotosk-FotoFotografieFotoaparty',
 '#ephoto');
});
html,body {
background-color:#222;
color:#fff;
font-family:"Noto Sans", sans-serif;
font-size:1em;
font-weight:400;
line-height:1.45;
}

a{
  color: #fff;
  text-decoration: none;
}
img{
  width:50px;
  height:50px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

从控制台检查您的数据,但未找到img参数。