为什么图标不以角度 5 显示？答案

【问题标题】：why icon not display in angular 5?为什么图标不以角度 5 显示？
【发布时间】：2018-10-21 08:01:03
【问题描述】：

我正在尝试以角度使用图像查看器插件，但我的图标未显示这是我的代码

export class AppComponent  {
  name = 'Angular';
  images=['https://images.pexels.com/photos/144240/goat-lamb-little-grass-144240.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb']
}

https://stackblitz.com/edit/angular-u26jb5?file=src%2Fapp%2Fapp.component.ts

我正在使用这个插件 https://www.npmjs.com/package/ngx-image-viewer 我已经按照所有步骤操作了。我不知道为什么它没有显示图标

【问题讨论】：

标签： javascript angular

【解决方案1】：

发生这种情况是因为您的图片 url 没有被 angular 防火墙清理。所以角度阻止了图像被加载。为了清理网址

use safe pipe in code.

在视图页面中：

<img [src]="catPictureUrl | safe: 'url'" alt="A Cat">

在 app.component.ts 中：

public catPictureUrl: string = `https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header`;

【讨论】：

【解决方案2】：

我真的不知道为什么会发生这种情况，但即使安装了 font-awesome，但模板没有获取样式。我尝试将 cdn 添加到 index.html 中，它工作正常。尝试将 cdn 添加到 index.html 就可以了

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

【讨论】：