I'm currently working on a project that is utilizing the Twitter API to display tweets. I have encountered an issue where the profile pictures from the API render as 1px x 1px when used as the src for an img tag. Strangely, if I directly paste the URL into the address bar, the image displays correctly. At first, I suspected my css to be the culprit, but any other image source works perfectly fine except for ones from Twitter's storage.
To illustrate the problem, here is a jsfiddle link:
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>
Relevant CSS
.image {
display: block;
position: relative;
vertical-align: top;
}
.is-64x64 {
height: 64px;
width: 64px;
}
img {
max-width: 100%;
}
Could this issue with displaying Twitter images be a common one, or am I overlooking something obvious?