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.
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?
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.
}
}
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:
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.