angular - Assets 未考虑基本 href url - 未找到错误

Question

我只是在我的 webform 项目中复制了我的 angular 构建脚本，并在 IIS 中部署了该项目。

注意:我只复制了未在 IIS 中单独部署的脚本文件。

我已将 angular dist 文件夹复制到 webform 项目的 Scripts 文件夹中。

现在我的基本网址是:
http://localhost/Angular2/

在 Angular 中，我设置了 base href 至 "../../Scripts/dist"内 index.html 文件。

一切正常，如路由、加载图像、js 文件等。只有 svg 图标没有加载和获取 404 未找到 错误。

对于 Angular 页面，除了 svg，一切(css,jpg,js)都是从
http://localhost/Angular2/Scripts/dist/main.js 等等。

但是 svg 图标正试图从路径加载
http://localhost/Angular2/assets/features/home.svg 代替 http://localhost/Angular2/Scripts/dist/assets/features/home.svg

我不确定为什么对于 svg 图标，base href 不起作用。

下面是我使用 Material 库使用 svg 图标的代码。

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/guest.svg'));

如果我用下面的修改了上面的行，那么它工作正常。

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/guest.svg'));

我可以知道为什么 base href 不申请 svg 图标吗？

提前致谢。

Answer 1

尝试使用相对路径:

改变

'/assets/features/home.svg'

到

'./assets/features/home.svg'

你的代码:

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/guest.svg'));