问题
I'm making a call using the DomSanitizer like this:
this.domSanitizer.bypassSecurityTrustResourceUrl(url));
The url
is complete URL to the SVG image being fetched.
Here's is an example:
this.matIconRegistry.addSvgIcon(
"fs",
this.domSanitizer.bypassSecurityTrustResourceUrl('https://github.com/fireflysemantics/images/blob/master/fsalpha/logo/fsalpha-logo-optimized.svg'));
However since base
is set to another URL in index.html
, the dom sanitizer URL is prefixed with it.
Is there a way to switch this off?
This is an article I wrote showing how it works without the base
attribute added:
https://medium.com/@ole.ersoy/angular-material-icon-from-github-hosted-svg-logo-d5c35b923d
And this is a stackblitz that shows that when the base attribute is added, the call to the absolute URL is prefixed with the base attribute, so the URL passed becomes broken:
https://stackblitz.com/edit/angular-material-custom-icon-with-base?file=src/index.html
Feature Request
Angular has a feature request WRT to this issue:
https://github.com/angular/angular/issues/23139
Angular Issue
https://github.com/angular/angular/issues/34645
Screenshot of Bug
This is a screenshot of the stacktrace showing that the base URL is prefixed before the image URL:
回答1:
This looks like a bug. There is no possible reason for the HttpClient to rewrite a URL which has a protocol.
Material icon registry doesn't mutate any of the URLs for icons. It doesn't really do anything special with the URL, and just defers loading to the HttpClient.
https://github.com/angular/components/blob/09dc4594259cf1d6b34a5a0893c0bccaa132c319/src/material/icon/icon-registry.ts#L595
I haven't been able to reproduce this, because it would require deploying an app to a domain like gh pages, but if you are seeing this happening then please open an issue on the Angular GitHub project and let them know.
The only answer that I can give you is to write a custom interceptor to fix the URL.
Here's a blog explaining how to use the interceptor to use a base URL. It's not a guide on how to fix your problem, but it's the closest thing that I could find.
http://www.projectcodify.com/angular-set-base-url-dynamically
来源:https://stackoverflow.com/questions/59605333/not-using-the-base-attribute-when-making-domsanitizer-api-calls