javascript - DomSanitizer API の呼び出し時に base 属性を使用していない？

私はこのように DomSanitizer を使って呼び出しをしています:

        this.domSanitizer.bypassSecurityTrustResourceUrl(url));

url は取得される SVG 画像の完全な URL です。

例を示します:

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

しかし、index.htmlでbaseが別のURLに設定されているため、DOMサニタイザーのURLにはそれが接頭辞として付けられます。

これをオフにする方法はありますか？

これは、base 属性を追加せずにどのように動作するかを示す、私が書いた記事です:

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

そしてこれは、base属性が追加されると、絶対URLへの呼び出しがbase属性で接頭されることを示すStackblitzであり、そのため渡されたURLが壊れてしまうことを示しています:

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

機能リクエスト

Angularには、この問題に関して機能リクエストがあります:

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

アンギュラーの問題

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

バグのスクリーンショット

これは、画像 URL の前にベース URL が接頭されていることを示すスタックトレースのスクリーンショットです:

回答 #1

これはバグのように見えます。プロトコルを持つURLを書き換える理由はHttpClientには考えられません。

マテリアルアイコンレジストリは、アイコンのURLを変更しません。URLに対して特別な処理を行うわけではなく、HttpClientにロードを委ねるだけです。

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

これを再現することはできませんでした。なぜなら、gh pages のようなドメインにアプリをデプロイする必要があるからです。しかし、もしこれが発生しているのを目にした場合は、Angular の GitHub プロジェクトで issue を開き、彼らに知らせてください。

私があなたに与えられる唯一の答えは、URLを修正するためにカスタムインターセプターを書くことです。

ここに、インターセプターを使ってベースURLを使用する方法を説明するブログがあります。これはあなたの問題を解決するためのガイドではありませんが、私が見つけられる中で最も近いものです。

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