我这个问题好几天了，不知道怎么办。所以我尝试从 instafeed 添加图像，而不是将静态放在 HTML 中或从数据库中获取数据，因为我希望图片与 instagram 个人资料相同。
这是我迄今为止尝试过的
/*-------------------------------------------------*/
/* = Instafeed
/*-------------------------------------------------*/
try {
var userFeed = new Instafeed({
get: 'user',
userId: settings.userId,
clientId: settings.clientId,
accessToken: settings.accessToken,
resolution: 'standard_resolution',
limit: 8,
template: '<div class="cbp-item ig"><a href="{{link}}" target="_blank" class="cbp-caption"><div class="cbp-caption-defaultWrap"><img src="https:{{image}}" alt="{{image}}"></div><div class="cbp-caption-activeWrap"><div class="cbp-l-caption-alignCenter"><div class="cbp-l-caption-body"><div class="cbp-l-caption-title">{{location}}</div><div class="cbp-l-caption-desc">{{caption}}</div></div></div></div></a></div>',
});
userFeed.run();
} catch(err) {
}
以上是 instafeed 的代码，我已经template从 cubeportfolio 中制作了它。下面是 cubeportfolio js。
// PortfolioGrid
$('#js-grid').cubeportfolio({
filters: '#js-filters',
layoutMode: 'grid',
sortToPreventGaps: true,
mediaQueries: [{
width: 1500,
cols: 3
}, {
width: 1100,
cols: 3
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
defaultFilter: '*',
animationType: 'sequentially',
gapHorizontal: 15,
gapVertical: 15,
caption: 'zoom',
displayType: 'sequentially',
displayTypeSpeed: 100
});
它确实出现在网站上but only，inspect element但图像在那里。这是检查元素的代码
如您所见，它确实出现了，但问题是 cubeportfolio 为这些项目添加样式（如果我直接放在 HTML 文件上，它确实会出现）。下面是检查元素的图像，您可以看到第一个项目上有样式，它是由 cubeportfolio 动态添加的。
那么如何让 instafeed 中的这些项目从 cubeportfolio 中获得风格呢？我已经尝试将 cubeportfolio 放在 instafeed js 中，所以当 instafeed 完成时，它会启动 cubeportfolio，但它仍然无法正常工作。
我感谢任何形式的帮助，谢谢
编辑：
即使在我尝试在 instafeed 之后运行 cubeportfolio 之后，它仍然无法正常工作
function cubePortfolioFunc() {
$('#js-grid').cubeportfolio({
filters: '#js-filters',
layoutMode: 'grid',
sortToPreventGaps: true,
mediaQueries: [{
width: 1500,
cols: 3
}, {
width: 1100,
cols: 3
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
defaultFilter: '*',
animationType: 'sequentially',
gapHorizontal: 15,
gapVertical: 15,
caption: 'zoom',
displayType: 'sequentially',
displayTypeSpeed: 100
});
}
function instaFeedFunc(callback) {
try {
var userFeed = new Instafeed({
get: 'user',
userId: settings.userId,
clientId: settings.clientId,
accessToken: settings.accessToken,
resolution: 'standard_resolution',
limit: 8,
template: '<div class="cbp-item ig"><a href="{{link}}" target="_blank" class="cbp-caption"><div class="cbp-caption-defaultWrap"><img src="https:{{image}}" alt="{{image}}"></div><div class="cbp-caption-activeWrap"><div class="cbp-l-caption-alignCenter"><div class="cbp-l-caption-body"><div class="cbp-l-caption-title">{{location}}</div><div class="cbp-l-caption-desc">{{caption}}</div></div></div></div></a></div>',
});
userFeed.run();
} catch(err) {
console.log(err);
}
}
(function ($) {
"use strict";
instaFeedFunc(cubePortfolioFunc());
}(jQuery));
编辑：
<!-- Portfolio -->
<section class="p0">
<div class="container-fluid">
<div class="row">
<div class="portfolio-no-gutter-fullwidth cbp" id="js-grid"></div>
</div>
</div>
</section>
<!-- End Portfolio -->