angular - 无法在 mat-icon 中加载自定义 SVG
问题描述
我正在尝试MatIconRegistry
在我的组件中使用以下代码加载自定义 SVG
constructor(fb: FormBuilder,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIconInNamespace(
'capp',
'reassign',
this.domSanitizer.bypassSecurityTrustResourceUrl('../../../../assets/images/reassign.svg')
);
this.form = fb.group({
query: ''
});
}
但是当我在浏览器中使用它时<mat-icon svgIcon="capp:reassign"></mat-icon>
我在控制台中收到以下错误
Error retrieving icon: Failed to construct 'URL': Invalid URL
我已经尝试了 SVG 的各种相对路径,它位于 assets 下的 images 文件夹中,我尝试过./
, /
,并使其相对于路径../../
我能够让它工作的唯一方法是指定完整的 URL,但这在部署时会有所不同,我理解 SVG 的路径应该是相对的
有人可以建议吗?
解决方案
我能够让它工作的唯一方法是指定完整的 URL,但这在部署时会有所不同
您已经解决了这里的问题:它需要一个绝对 URL 而不是相对 URL。
要解决“部署时不同”的问题,您可以考虑使用window.location.origin
,它适用于任何环境,只要应用程序的基本 url 是/
.
matIconRegistry.addSvgIconInNamespace(
'capp',
'reassign',
domSanitizer.bypassSecurityTrustResourceUrl(window.location.origin + '/assets/images/reassign.svg')
);
推荐阅读
- amazon-web-services - 将文件从 EC2 Windows 实例传输到本地 Mac
- excel - 如何在EXCEL VBA中将内容从评论提取到单元格?
- css - css linter期望RBRACE围绕旋转功能
- sql - 根据 SQL 中的元素变化的时间范围内所有匹配元素的总和
- python - Point() 接受 0 个位置子模式(给定 2 个)
- uml - 在 UML 状态图中明确表明活动的顺序无关紧要
- c - 一个结构包含一个双向链表成员。为什么这个成员在结构体中的顺序会影响我的一些操作结果?
- ssl - Earthly 中的自签名证书
- debugging - VScode 调试不起作用:转到 setting.json
- html - HTML表单mailto:无论填写什么,邮件正文都是空的