css - 来自 Twitter API 的图像呈现为 1px x 1px

Question

我正在构建一个与 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 图片的已知问题，还是我遗漏了一些非常明显的东西？

Answer 1

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