PolymerElements/iron-image

Placeholder with data uri doesn't work

Closed this issue · 1 comments

zeitiger commented

Description

I followed the doc suggestion and put a placeholder as data uri

<iron-image width="185" height="150"
                    placeholder="data:image/svg+xml;utf8,
    <svg fill='#000000' height='48' viewBox='0 0 24 24' width='48' xmlns='http://www.w3.org/2000/svg'>
        <path d='M0 0h24v24H0z' fill='none'/>
        <path d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/>
    </svg>"
                   sizing="contain" fade preload></iron-image>

instead of

<iron-image width="185" height="150"
                    placeholder="images/ic_photo_black_48px.svg"
                    sizing="contain" fade preload></iron-image>

First code fragement doesn't work, second with external asset works fine.

Expected outcome

### Actual outcome

Blank. Quiet strange is that in JS level the this.$.placeholder.style.backgroundImage assignment failed. Maybe its a Chrome bug?

### Browsers Affected
  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
bicknellr commented

Chrome and Safari both seem have issues with the newlines in the data URI and Firefox escapes the quotes in the SVG when that value is set to the background URL of an element: here's a demo. If you base64 encode the data URI, there shouldn't be any problems with parsing quirks though. I'm going to close this because I don't really think it's within the scope of iron-image to repair a URL / data URI but let me know if this doesn't solve your problem.

  • 👍1
  • 😄1