While rebuilding the Pinterest extension for Chrome we ran across a weird edge case at vox.com. We could preview their nice big fat srcset-enabled images in the grid and scrape + post to Pinterest, but could not take the src attribute of an IMG tag and directly apply it to the background-image style attribute of a new DIV.
Here are some reduced cases:
Copy this to clipboard:
var t = 'https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
div.style.height = this.naturalHeight + 'px';
div.style.width = this.naturalWidth + 'px';
div.style.backgroundColor = '#aaa';
div.style.backgroundImage = 'url(' + this.src + ')';
console.log(div);
}
img.src = t;
In Chrome, open up a new tab and paste. If all goes well you should see a 640x478-pixel DIV, with a background image from Flickr. In your console window, look for the value of t echoed back, like this:
"https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg"
... and then a representation of your new DIV:
<div style="height: 478px; width: 640px; background-color: rgb(170, 170, 170); background-image: url("https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg")></div>
Let's try that again with a vox.com image URL. Copy this to clipboard:
var t = 'https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
div.style.height = this.naturalHeight + 'px';
div.style.width = this.naturalWidth + 'px';
div.style.backgroundColor = '#aaa';
div.style.backgroundImage = 'url(' + this.src + ')';
console.log(div);
}
img.src = t;
Open another new tab, go to console, and paste. Here we see a big gray rectangle, and the following echoed back:
"https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/…x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg"
<div style="height: 613px; width: 920px; background-color: rgb(170, 170, 170);"></div>
Dude, where's our background image?
Workaround for this seems to be quotes around the URL when setting backgroundImage:
var t = 'https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
div.style.height = this.naturalHeight + 'px';
div.style.width = this.naturalWidth + 'px';
div.style.backgroundColor = '#aaa';
div.style.backgroundImage = 'url("' + this.src + '")';
console.log(div);
}
img.src = t;
What's going on here? Is it just any URL over 150 characters getting truncated? Apparently not.
Copy this to clipboard:
var t = 'https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-dolor-sit-amet-consectetur-adipiscing-elit-Aenean-non-posuere-massa-Nullam-vulputate-ac-quam-mattis-commodo-Vivamus-sollicitudin-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
div.style.height = this.naturalHeight + 'px';
div.style.width = this.naturalWidth + 'px';
div.style.backgroundColor = '#aaa';
div.style.backgroundImage = 'url(' + this.src + ')';
console.log(div);
}
img.src = t;
... and paste. Here are our results:
"https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-…-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere"
<div style="height: 478px; width: 640px; background-color: rgb(170, 170, 170); background-image: url("https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-dolor-sit-amet-consectetur-adipiscing-elit-Aenean-non-posuere-massa-Nullam-vulputate-ac-quam-mattis-commodo-Vivamus-sollicitudin-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere");"></div>
Here the URL we're using is being truncated in the console, but is being successfully applied to the background image of our new DIV.
Altering the vox.com URL so it's plain text by removing the colon shows the whole thing in console:
var t = 'https//cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
console.log(t);
https//cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg
... so it begins to look like this is something that affects URLs only.