javascript - Inte använda base-attributet när man gör DomSanitizer API-anrop?


Jag gör ett samtal med DomSanitizer på detta sätt:

        this.domSanitizer.bypassSecurityTrustResourceUrl(url));

url är den fullständiga webbadressen till SVG-bilden som hämtas.

Här är ett exempel:

      this.matIconRegistry.addSvgIcon(
        "fs",
        this.domSanitizer.bypassSecurityTrustResourceUrl('https://github.com/fireflysemantics/images/blob/master/fsalpha/logo/fsalpha-logo-optimized.svg'));

Men eftersom base är inställt på en annan URL i index.html, prefixas dom-sanerarens URL med den.

Finns det ett sätt att stänga av detta?

Detta är en artikel jag skrev som visar hur det fungerar utan att base-attributet har lagts till:

https://medium.com/@ole.ersoy/angular-material-icon-from-github-hosted-svg-logo-d5c35b923d

Och detta är en stackblitz som visar att när base-attributet läggs till, prefixas anropet till den absoluta URL:en med base-attributet, så att den URL som skickas blir trasig:

https://stackblitz.com/edit/angular-material-custom-icon-with-base?file=src/index.html

Funktionsförfrågan

Angular har en funktionsbegäran när det gäller detta problem:

https://github.com/angular/angular/issues/23139

Angular-problem

https://github.com/angular/angular/issues/34645

Skärmdump av bugg

Detta är en skärmdump av stackspåret som visar att bas-URL:en är prefixad före bild-URL:en:

Svar #1

Detta ser ut som ett fel. Det finns ingen möjlig anledning för HttpClient att skriva om en URL som har ett protokoll.

Materialikonregistret ändrar inte några av URL:erna för ikoner. Det gör egentligen ingenting speciellt med URL:en och skjuter bara upp laddningen till HttpClient.

https://github.com/angular/components/blob/09dc4594259cf1d6b34a5a0893c0bccaa132c319/src/material/icon/icon-registry.ts#L595

Jag har inte kunnat återskapa detta, eftersom det skulle kräva att man distribuerar en app till ett domän som gh pages, men om du ser att detta händer, vänligen öppna ett ärende på Angulars GitHub-projekt och meddela dem.

Det enda svaret jag kan ge dig är att skriva en anpassad interceptor för att fixa URL:en.

Här är en blogg som förklarar hur man använder interceptorn för att använda en bas-URL. Det är inte en guide om hur man åtgärdar ditt problem, men det är det närmaste jag kunde hitta.

http://www.projectcodify.com/angular-set-base-url-dynamically