资产未考虑基本 href url - 未找到错误

Question

我刚刚在我的 webform 项目中复制了我的 Angular 构建脚本，并将该项目部署在 IIS 中。

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

我在 webform 项目的 Scripts 文件夹中复制了 angular dist 文件夹。

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

在 Angular 中，我在 index.html中将 base href 设置为 "../../Scripts/dist" > 文件。

一切正常，如路由、加载图像、js 文件等。只有 svg 图标未加载并出现 404 Not Found 错误。

对于 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 不起作用。

下面是我使用材质库使用 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'));