破碎的图像路径instafeed.js

Question

我正在使用instafeed.js拍摄Instagram照片，一切正常，但图片已损坏。当我点击一个它，它带我到正确的Instagram页面，但图像本身只是打破。任何想法为什么？
         

<script type="text/javascript">


var userFeed = new Instafeed({
    get: 'user',
    userId: 143928822,
    accessToken: '143928822.5b9e1e6.36ad47c3abaf4c9bb813748ce8072a12',
    sortBy: "most-recent 
});
userFeed.run();
</script>

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

Answer 1

将useHttp: true添加到您的设置中：

var userFeed = new Instafeed({
  get: 'user',
  userId: 143928822,
  accessToken: 'xxxxxx',
  sortBy: 'most-recent',
  useHttp: true
});
userFeed.run();

---

如果您直接从文件系统查看HTML文件，则需要此设置。

您可以通过查看地址栏来判断是否属于这种情况。如果它以file://开头，则说明您正在使用文件系统。

如果您对需要的原因感到好奇，请查看Paul Irish关于the protocol relative URL的文章。

Answer 2

注意：这不是一个完整的解决方案，只是关于如何开始解决问题的建议。

---

当您在浏览器中请求网页时，会发生一些事情。

1. 您的浏览器向目标发出GET请求
2. 目标服务器以一些HTTP response code响应并可能显示一些html
3. 您的浏览器浏览该html并查找对各种其他资源*
的引用
4. 您的浏览器会发出对所有这些资源的GET请求
5. 这些资源所在的服务器响应更多响应代码并可能响应所请求的资源

如果您的浏览器没有显示图片，那是因为持有图片的服务器并未将图片提供给您。这可能有很多原因，包括：

• 404 - 无法找到资源
• 500 - 服务器发生了一些错误
• 403 - 由于某种原因，您不允许访问该图片。

如果您可以找出您为资源获取的响应代码，那么您将有一些工作要做。

---

*图片，视频等

Answer 3

将resolution: 'low_resolution'添加到您的设置中。我的设置已设置为standard_resolution，它在我托管的页面上触发了404错误，在Instagram cdn上发生了5xx错误。所以设置应该如下：

var userFeed = new Instafeed({
  get: 'user',
  userId: 143928822,
  accessToken: 'xxxxxx',
  sortBy: 'most-recent',
  resolution: 'low_resolution'
});
userFeed.run();

此方法将为cdn找到低分辨率图像并显示这些图像。使用标准和缩略图图像。这绝不是一个修复，但至少它会显示你的cdn而不是托管它的图像。