AngularJS绑定在<img>标签的'src'属性中。

Question

我有一个包含许多行的表，每一行都有一个预览图片，在鼠标悬停在该行时会显示在右上角。

以下是我用AngularJS绑定URL放置图片标签的方法：<img ng-src="{{ imageURL }}" />

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

但是在控制台中出现了以下错误：

GET http://localhost/#/imageUrl 404 (未找到)

如何消除浏览器控制台中的此错误？

- Dee

---

请使用 ng-src 替代 src。 - David R

Answer 1

Angular拥有自己的指令用于img，称为ng-src：

<img ng-src="{{imageUrl}}"/>

- Mistalis

Answer 2

你需要在你的 <img> 标签中使用 ng-src 而不是 src。

文档说得很清楚，

在 src 属性中使用类似 {{hash}} 的 Angular 标记不起作用：浏览器将从带有字面文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 内部的表达式。ngSrc 指令解决了这个问题。

https://docs.angularjs.org/api/ng/directive/ngSrc

希望这有所帮助！

- David R