如何在图像 url 的模板中编码 Angular 7 中的 url 片段
How to encode a url segment in Angular 7 in the Template for an image url
我有以下代码，这是我对 url 进行编码的尝试：
<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"; } }
您有几个不同的选择：
此方法使用 CSS 并将图像设置为背景，以便更好地调整大小。
<div [style.backgroundImage]="'url('+ image +')'" class="image"></div>
使用Angular消毒剂确保url不包含危险脚本https://angular.io/api/platform-browser/DomSanitizer
调用一个函数来计算url，然后它就可以运行你想要的编码。
<img [src]="getImageUrl(data.animal.image)" />
我有以下代码，这是我对 url 进行编码的尝试：
<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"; } }
您有几个不同的选择：
此方法使用 CSS 并将图像设置为背景，以便更好地调整大小。
<div [style.backgroundImage]="'url('+ image +')'" class="image"></div>使用Angular消毒剂确保url不包含危险脚本https://angular.io/api/platform-browser/DomSanitizer
调用一个函数来计算url，然后它就可以运行你想要的编码。
<img [src]="getImageUrl(data.animal.image)" />