First off, I want to thank you for creating and maintaining Twitter-Post-Fetcher. It is a great tool and I really appreciate it.
With the recent Twitter changes, I was curious to know if anyone has encountered img elements being displayed with undefined src, with "showImages": true
? I looked through existing issues and did not see any references to it.
<div class="media">
<img src="undefined" alt="Image from tweet">
</div>
<div class="timeline-Tweet-media">
<div class="PrerenderedCard" data-card-name="summary_large_image" data-css="https://ton.twimg.com/tfw/css/syndication_bundle_v1_826d162568fd5604ef605f485c8050cdbc7a7b99.css" data-scribe="component:card">
<div class="TwitterCardsGrid TwitterCard">
<script type="text/twitter-cards-serialization">
{ "strings": { }, "card": { "forward" : "false", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "summary_large_image", "token" : "", "card_uri" : "https://t.co/DQbE7e5l77", "tweet_id" : "705821491758141440", "card_url" : "https://t.co/DQbE7e5l77" }, "scribeData": { "card_name": "summary_large_image", "card_url": "https://t.co/DQbE7e5l77" } }
</script>
<div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
<a class=" js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small" href="https://t.co/DQbE7e5l77">
<div class="SummaryCard-image TwitterCardsGrid-float--prev">
<div class="tcu-imageContainer tcu-imageAspect--1to1">
<style>
.tcu-image-705821491758141440 {
background-size: 3em !important;
}
</style>
<div class="tcu-imageWrapper tcu-image-705821491758141440 js-cspForcedStyle" data-style="background-size: 3em;">
</div>
</div>
</div>
<div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
<div class="SummaryCard-content">
<h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">Looks like interacting in Virtual Reality is a lot better than a few years…</h2>
<p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">Looks like interacting in Virtual Reality is a lot better than a few years back. But maybe it is a little too good! Check out the dangers too in the video… - Jason Mayes - Google+</p>
<span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">plus.google.com</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="media">
<img src="undefined" alt="Image from tweet">
</div>
<div class="timeline-Tweet-media">
<article class="MediaCard
MediaCard--mediaForward
cards-multimedia
customisable-border" data-scribe="component:card" dir="ltr">
<div class="MediaCard-media">
<div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 800px" data-style="max-width: 800px">
<div class="MediaCard-mediaContainer js-cspForcedStyle" style="padding-bottom: 100.0000%" data-style="padding-bottom: 100.0000%">
<a href="https://twitter.com/TwitterDev/status/705436774441623554" class="MediaCard-mediaAsset MediaCard-mediaPlaceholder
NaturalImage NaturalImage--fill
js-playableMediaInterstitial">
<div class="NaturalImage-ctaOverlay PlayButton PlayButton--centered" data-scribe="element:play_button">
<div class="Icon Icon--playCircle " aria-label="Play Media" title="Play Media" role="img"></div>
</div>
<img class="NaturalImage-image" src="https://pbs.twimg.com/tweet_video_thumb/Cco29woW8AAMqS3.jpg" alt="" data-scribe="element:poster_image">
</a>
</div>
</div>
</div>
</article>
</div>
Although a bit crude, adding a check to see if the result of extractImageUrl() is not undefined appears to work.
if (showImages && images[n] !== undefined && extractImageUrl(images[n]) !== undefined) {
op += '<div class="media">' +
'<img src="' + extractImageUrl(images[n]) +
'" alt="Image from tweet" />' + '</div>';
}
Also, are you open to a pull request that adds a config option for choosing between data-src-1x and data-src-2x?