0

First, let me say, yes I have included the shims in my index.html.

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js">
</script>

I'm using Angular2 beta-17.

The string properties below are all resolved fine except for the image style in IE.

In IE, the name and address properties show fine, but the style is completely removed from the img tag. This works fine in all other browsers

Name: {{recipient.name}} <br/>
Address: {{recipient.address}} <br/>
<img style="background: url(/pImages/{{recipient._id}}.jpg);"  />

IE seems to have a problem with the brackets in the style value because the following hard-coded value works fine in IE

<img style="background: url(/pImages/230721.jpg);"  />

Every search I've done claims to resolve all of IE's issues by putting in the shims, but I've done that.

TIA

Shar
  • 55
  • 8

1 Answers1

0

This should work the same with all browsers:

<img [style.background-image]="'url(/pImages/' + recipient._id + '.jpg)'"  />

In Angular2 versions rc.x you currently need to sanitize some styles

See Plunker example and In RC.1 some styles can't be added using binding syntax

In beta versions you don't need the pipe (| safe) I used in the Plunker.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • That throws this error: Cannot find a differ supporting object 'background-image:url(/pimages/57211a89b65ff1be3edd14c5.jpg); I think its because ngStyle expects an ? : expression. Also img [style]="presetExpression" works fine EXCEPT in IE. Still stuck. – Shar May 07 '16 at 14:55
  • The edited version doesn't work either, throws errors. – Shar May 07 '16 at 15:10
  • Wow...that fixed the problem in I.E. Thanks ! – Shar May 07 '16 at 23:31
  • FYI... I upgraded to RC1 which caused this solution to no longer work, so I tried using the sanitizer but that causes problems for styles that may have embedded single quotes. This statement: sanitizer.bypassSecurityTrustStyle('url(/pImages/' + this.recipientId + '.jpg)'); gets converted into this: style="background-image: url("/pImages/57211a89b65ff1be3edd14c9.jpg");" so the double quote right after url( ends the style string and breaks it. I've tried manually putting in single quotes, but they end up getting converted to double quotes, breaking the style string. – Shar May 15 '16 at 13:04