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

标签： javascriptangular

Answer 1

发生这种情况是因为您的图像 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`;