Image isn't displayed when using an {{enyo/Image}} in its {{'contains'}} sizing mode (setting image as background for a div) in Chrome.

[lishammel]

From: Haravikk in http://forums.enyojs.com/discussion/2627/reporting-bugs#latest

It appears there's a problem when using an {{enyo/Image}} in its {{'contains'}} sizing mode (setting image as background for a div) in Chrome.

This works just fine in Safari, my other main browser, but has a strange bug in Chrome that is causing it to display nothing at all.

Although the URL is being applied it is malformed somehow, meaning it isn't recognised. I'm attaching some screenshots from Chrome's web-inspector to hopefully illustrate the problem.

!Screen Shot 2017-06-03 at 18.11.42.png|thumbnail!
!Screen Shot 2017-06-03 at 18.11.37.png|thumbnail!

Here's how I'm creating my component:

{code:javascript}{name: 'image', classes: 'image', kind: Image, sizing: 'contain', src: null, showing: false}{code}

And later how I'm setting a URL later on:

{code:javascript}this.$.image.set('src', theImageURL);
this.$.image.show();{code}

I had a quick dig around in the code but couldn't figure out the problem. The only thing I can think of is that the computed element is using double-quotes to contain attribute values, but double-quotes are also being used for the URL within the style; I wouldn't have thought that this should matter when manipulating DOM through Javascript, but I couldn't figure out where the double-quotes are creeping in in order to see if that would fix it, and have run out of time (am filling this in on the move).

I'll try and take another look if I get a chance, but there's a bug in there somewhere!