我正在尝试使用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的人。
答案 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
参数。