中继器中的自定义角度图像指令导致404

Question

我有一个自定义的Angular JS指令，其模板包含一个包含一些引用范围变量的表达式的图像。类似的东西：

scope:{s:'@'},
template: '<img src="{{s}}" width="200">'

这样可以正常工作，但是当我将指令放在转发器中时，我在控制台中得到一个类似于： GET http://run.jsbin.io/%7B%7Bs%7D%7D 404 (Not Found)

这是一个jsbin，我在一个简单的（虽然是人为的）例子中复制了这个行为： http://jsbin.com/lavozequ/4/edit?html,js,output

如果您查看JavaScript控制台（不是来自浏览器的JSBin），您只能看到问题。

我相信这是设计的。我认为转发器在数据绑定之前构建DOM树以提高性能。因此，第一次通过浏览器尝试获取一个未绑定的元素，该元素是一个指向不存在的图像的字符串。

我的问题是，我可以创建一个避免这个404的类似指令吗？

Answer 1

如果您绑定到src，请改为使用ng-src：

scope:{s:'@'},
template: '<img ng-src="{{s}}" width="200">'

Angular将在修改ng-src元素之前解析src 的内容，从而避免使用404.

了解更多信息：https://docs.angularjs.org/api/ng/directive/ngSrc