在 Angular 中使用哪个更好 - src 或 [src]

Question

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 }}">

在组件.ts中

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

Answer 4

**

我认为以下链接会对您有很大帮助