Question

我只是使用Instafeed.js库创建一个显示Instagram照片的基本页面。我按照教程进行了操作，但是当我打开HTML页面时，我只看到了像素化的图像，而不是实际的图像。

当我打开控制台时，每张照片旁边都会出现错误net :: ERR_FILE_NOT_FOUND。

以下是代码：

<script type="text/javascript" src="instafeed.min.js"></script>


<div id="instafeed"></div>


<script type="text/javascript">
 var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'Your Client Id'
});
 feed.run();
</script>

Answer 1

如果您在本地查看HTML页面（在本地我的意思是您的地址栏以file://开头，则需要在设置中添加useHttp: true：

<script type="text/javascript">
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'Your Client Id',
    useHttp: true   // <--- add this
  });
  feed.run();
</script>

在本地查看文件时需要此选项，因为图像尝试使用protocol-relative URLs加载。如果您要在实际的Web服务器上查看该HTML文件，则不需要该选项。

版本1.3中引入了此更改。

Answer 2

如果有同样的问题，检查这些元素会有很大帮助。添加模板参数将有所帮助，问题在于{{image}}，您必须在它之前放置http：。希望它有所帮助，因为它应该。

<script type="text/javascript">
 var feed = new Instafeed({
 get: 'tagged',
 tagName: 'awesome',
 clientId: 'Your Client Id',

 template: '<a href="{{link}}" target="_blank"><img src="http:{{image}}" /></a>'

Answer 3

我遇到了类似的问题。即使遵循史蒂文的回答，我也无法将图像显示在本地。但是，将文件上载到服务器后，所有图像都按预期显示。您必须确保您使用的客户端ID是正确的，并尝试在服务器上访问它。我的代码看起来像这样

<script type="text/javascript">
  var feed = new Instafeed({
  get: 'tagged',
  tagName: 'happy',
  clientId: 'the-client-id'
  });
  feed.run();
</script>
 <div id="instafeed"></div>
</body>

Instafeed.js的问题

3 个答案: