解析错误[{{}}]或使用清理不安全的网址

Question

我正在使用角度8，并且需要从API渲染照片。 这是我尝试加载图像的地方。

<img [src]="{{ items[i].urlToImage }}" alt="">

我也尝试过不使用src周围的[]。

当我使用带有[]的版本时，起飞时会出现解析错误[{{}}]，我得到的是不安全的URL警告，下面要求使用属性binding-> []。 在组件中，我确实使用了消毒剂。

      urlToImage: this.sanitaizer.bypassSecurityTrustResourceUrl
                  (ret["articles"][i]["urlToImage"]).toString()

我从return方法（在控制台中检查了）中获取了正确的网址

Answer 1

无需插值{{}}即可使用：

<img [src]="items[i].urlToImage" alt="">

或内插：

<img src="{{ items[i].urlToImage }}" alt="">

Answer 2

您正在一起使用数据绑定和属性绑定，而angular不支持。 使用其中任何一个。

<img [src]="items[i].urlToImage" alt="">

OR

<img src="{{items[i].urlToImage}}" alt="">

请注意，最好的方法是在使用[]

处理HTML属性时使用属性绑定

Answer 3

正如其他提到的-String interpolation在不带括号的斜角作品中。方括号[]用于属性绑定-它需要一个表达式。

对于您的消毒问题，对于图像这样的资源，您最终应使用bypassSecurityTrustResourceUrl()而不使用toString()，因为您希望[src]是SafeResourceUrl而不是字符串。

模板：

<img [src]="items[i].urlToImage" alt="">

打字稿：

urlToImage: this.sanitaizer.bypassSecurityTrustResourceUrl
                  (ret["articles"][i]["urlToImage"]);