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

Question

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

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 我已经按照所有步骤操作了。我不知道为什么它没有显示图标

Answer 1

之所以会发生这种情况，是因为您的图片网址没有被角度防火墙清除。因此，角度阻碍了图像的加载。 为了清理网址

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`; 

Answer 2

我真的不知道为什么会这样，但是即使安装了真棒字体，但模板却没有样式。 我尝试将CDN添加到index.html，它工作正常。 尝试将CDN添加到index.html，您就可以了

moveTo