Question

想知道什么建议用于Angular，标准html src或Angular [src]？为什么？

编辑：我的html组件中有以下代码：

<img class="logo" src="../app/media/appLogo.png">

很好吗？如果没有，我应该如何将其更改为与[src]一起使用？

Edit2 ：有没有其他更好的方法，而不是简单的html src？或者这实际上是最好的解决方案？

Answer 1

[...]="..."用于对象绑定...="{{...}}"用于绑定字符串插值。如果要绑定字符串，则无关紧要。如果要绑定对象或数组值，则需要使用`[...] =“...”。除此之外，这完全取决于你。

<img class="logo" src="../app/media/appLogo.png">

根本与Angular2无关，那就是纯HTML（没有[]而没有{{}}）。如果您在[]附近添加src，那么Angular会将../app/media/appLogo.png视为表达式，但显然不是。

使用DomSanitizer时[src]="..."是必需的，因为该值不再是字符串，而是一个对象并使用{{}}将以无效方式对其进行字符串化。

Answer 2

使用常规src设置属性，其中设置[src]设置属性。考虑到图像（我假设您正在谈论图像，但您不会说），src属性用于设置相应的属性，它们都可以工作。

但使用[src]有一个重要原因。在解析html时，浏览器倾向于开始下载放在src属性中的任何内容。所以我们说你这样做：

<img src="{{myImgSrc}}"/>

浏览器通常会立即开始下载{{myImgSrc}}，这将导致控制台中的404。因此使用以下内容稍微好一些：

<img [src]="myImgSrc"/>

Answer 3

如果您有静态锚链接，请继续

<img class="logo" src="../app/media/appLogo.png">

从组件绑定时，以下任何一个都可以正常工作。

<img class="logo" [src]="image_src">
<img class="logo" src="{{ image_src }}">

在component.ts

image_src: string = '../app/media/appLogo.png';