损坏的图像路径 instafeed.js答案

【问题标题】：broken image path instafeed.js损坏的图像路径 instafeed.js
【发布时间】：2015-08-17 19:47:52
【问题描述】：

我正在使用 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>

【问题讨论】：

当您查看开发者控制台的网络选项卡时，当您的浏览器尝试检索图像资源时，您是否收到 404 NotFound 响应？还是其他响应代码？
我在开发工具的那个部分添加了另一个我从未去过的屏幕截图，所以你在说什么？
嗯...我更熟悉 chrome 的开发工具。 Safari 似乎没有显示该信息。如果您在打开该选项卡的情况下重新加载页面，它看起来会有所不同吗？还是他们在左边有多个 GET 请求？
好吧，我将文件上传到服务器nickshanekearney.com/insta/insta.html，但似乎它所需要的只是实际在服务器上。它可以实时运行，只是不在我的本地机器上....感谢您的帮助！

标签： javascript jquery html

【解决方案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 上的文章。

【讨论】：

【解决方案2】：

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

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

您的浏览器向目标发出 GET 请求
目标服务器响应一些 HTTP response code 并可能显示一些 html
您的浏览器浏览该 html 并找到对各种其他资源*
您的浏览器对所有这些资源发出 GET 请求
这些资源所在的服务器以更多响应代码和可能请求的资源进行响应

如果您的浏览器没有显示图像，那是因为保存它们的服务器没有将它们提供给您。这可能有很多原因，包括：

404 - 找不到资源
500 - 服务器出现错误
403 - 由于某种原因，您无权访问该图像。

如果你能弄清楚你为资源获得了什么响应代码，你就会有一些东西可以使用。

*图片、视频等

【讨论】：

【解决方案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 中显示您的图像，而不是托管它。

【讨论】：