踩坑日记——angular中img图片路径不安全内联

问题

angular开发的一个H5页面，突然发现页面上的图片无法正常显示。

最后在控制台发现图片有一个 "unsafe" 的报错。

解决方法

    //引入 DomSanitizer模块 并定义
    import { DomSanitizer } from '@angular/platform-browser';
    constructor(
        public sanitizer: DomSanitizer
    ) {}
    

    //将从接口获取的图片地址转换为安全地址
    this.imgUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    
    
    //html中就能拿到这个安全地址了
     <img [src]="imgUrl" alt="">