如何在模板的Angular 7中为图像网址编码网址段

Question

我有以下代码是我尝试编码的网址：

<img src="{{ '/assets/images/animals/' + (data.animal.image | encodeURIComponent) }}" alt="" class="animal" />

我遇到了错误：

The pipe 'encodeURIComponent' could not be found

我假设没有这样的管道，或者我应该在某处导入一些东西。

这样做的正确方法是什么，最好是全部在模板中？

根据要求，这里是数据样本

data = { "animal" : { id: 1; image:"dog.png"; } } 

Answer 1

您有几种选择：

1. 此方法使用CSS并将图像设置为背景，以便更好地调整大小。

   <div [style.backgroundImage]="'url('+ image +')'" class="image"></div>

2. 使用Angular清理器确保URL不包含危险脚本https://angular.io/api/platform-browser/DomSanitizer

3. 调用一个函数来计算URL，然后它可以运行所需的编码。 <img [src]="getImageUrl(data.animal.image)" />