почему значок не отображается в угловых 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

Я действительно не знаю, почему это происходит, но установлен даже шрифт, но шаблон не получает стили.Я попытался добавить CDN в index.html, и он просто отлично работает.Попробуйте добавить cdn в index.html, и вы готовы пойти

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

Answer 2

Это происходит потому, что ваш URL для изображения не очищается угловым межсетевым экраном.Так что angular блокирует изображение от загрузки.Чтобы очистить URL-адрес

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