来自 Twitter API 的图像呈现为 1px x 1px答案

【问题标题】：Images from Twitter API rendering as 1px x 1px来自 Twitter API 的图像呈现为 1px x 1px
【发布时间】：2016-06-27 12:02:16
【问题描述】：

我正在构建一个与 Twitter API 交互的简单应用程序，其中一部分涉及显示推文。我很好地提取了个人资料图片的 URL，但是当我将它用作 img 标签的 src 时，它呈现为 1px x 1px。如果我只是将链接粘贴到地址栏中，它会完全按照我的预期显示图像。我自然认为我的 css 有问题，但实际上任何不是来自 Twitter 图像存储的图像都可以正常工作。

这是一个演示问题的 jsfiddle：

https://jsfiddle.net/7Lv8g8uz/2/

HTML

<!-- URL pulled from Twitter API-->
<figure class="image is-64x64">
  <img src="https://pbs.twimg.com/profile_images/429198033666863104/KGl1cz6-_normal.jpeg" alt="Image">
</figure>

<!-- Random image from Google -->
<figure class="image is-64x64">
  <img src="https://play.google.com/books/publish/u/0/static/images/google-search.png" alt="Image">
</figure>

相关 CSS

.image {
  display: block;
  position: relative;
  vertical-align: top;
}

.is-64x64 {
  height: 64px;
  width: 64px;
}

img {
  max-width: 100%;
}

这是 Twitter 图片的一个已知问题，还是我遗漏了一些非常明显的问题？

【问题讨论】：

您使用的是哪个浏览器？我在 FF、Chrome、Opera 中尝试过——所有这些都很好地渲染了那个小提琴中的图像。
我在 OS X 上使用 Chrome。也许我的 Chrome 配置有些奇怪？我尝试禁用所有扩展，但没有成功。我会尝试全新安装，看看是否可行。

标签： css image twitter

【解决方案1】：

事实证明，Disconnect 正在阻止来自 Twitter 图像存储的图像，但我猜它在实际 Twitter 域的幕后被关闭（这就是图像在那里渲染良好的原因）。我知道这会很简单！

【讨论】：