Img tag not working in ionic Beta 8


#1

I am moving my ionic project from ionic Beta 6 to ionic Beta 8. My code used to work but now I am getting a browser error when doing ionic serve --lab on my img tags.

It is falling over on this line:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

The error I am getting is:

Error: Uncaught (in promise): EXCEPTION: Error in build/pages/veeu/veeu.html:74:124
ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context
ORIGINAL STACKTRACE:
[315]</DomSanitizationServiceImpl</DomSanitizationServiceImpl.prototype.sanitize@http://localhost:8100/build/js/app.bundle.js:44595:23
anonymous/_View_VeeUPage0.prototype.detectChangesInternal@VeeUPage.template.js:731:70
[221]</AppView</AppView.prototype.detectChanges@http://localhost:8100/build/js/app.bundle.js:33734:9
[221]</DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:8100/build/js/app.bundle.js:33839:13

The code works fine under Beta 6 but not under Beta 8. Is there something I need to do?

EDIT:

The url it is complaining about is:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg


#2

I guess that this is due to the auto-sanitization in the latest RC (see the Angular 2 Changelog for details):

HTML, style values, and URLs are now automatically sanitized. Values that do not match are escaped or ignored. When binding a URL or style property that would get ignored, bind to a value explicitly marked as safe instead by injection the DOM sanitization service:

class MyComponent {
constructor(sanitizer: DomSanitizationService) {
// ONLY DO THIS FOR VALUES YOU KNOW TO BE SAFE! NEVER ALLOW USER DATA IN THIS!
this.safeStyleValue = sanitizer.bypassSecurityTrustStyle(‘rotate(90deg)’);
// then bind to safeStyleValue in your template.
}
}


#3

I have tried using DomSanitizationService but still get the same error. I have added

theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(theURL);

But this still gives an error.


#4

I guess that Angular uses some specific class to mark a value as safe. However in your code you’re just converting it to string (using the {{...}} syntax) so the bypass has no effect. Try binding the value to the attribute, i.e. update your code this way:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

#5

I now have:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

And

this.theMediaItem.photoURL1 = this.sanitizeURL(this.mediaItems[1].url);

Where sanitizeURL is:

  sanitizeURL(theURL){
    return this.sanitizer.bypassSecurityTrustUrl(theURL);
  }

I still get the same error message though. Is there some way to turn the sanitization off?


#6

I copypasted the link to the image you posted and put it in a scratch project using just the <img [src]="imgSrc"> syntax, no messing with sanitization. Worked fine.


#7

I’m not sure why though. I just tested it in plunker and it seems to work as expected. There are also more details in the following Angular 2 issue:


#8

What version of Angular 2 are you using?


#9

pad pad stupid forum software rc2.


#10

Ok well it looks like my setup is screwed somehow so I will start from a fresh install and see if that fixes it.