依赖关系注入到 ng-repeat 循环中的 HTML img src 标签中不起作用

Question

我的值无法正常工作有一个奇怪的问题。基本上，我有一个与服务器上的图像相对应的大量id。

Images: {
    "Set1" : {
        'Blue':['8277','8278','8279','8280','8281','8282','8283'],
        'Green':['8284','8285'],
        'Red':['8286','8287','8288','8289']
    }
}

在我的控制器模型中，我有一个看起来像这样的ng-repeat。

<div ng-controller="myCtl">
    <div ng-repeat="(key, value) in cities">
        <p> 
            <img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
        </p>
    </div>
</div>

我的问题是它实际上不会解决页面上的 img。如果我以任何其他方式拉入 imgs，它可以正常工作。

这是混合HTML和ng重复循环的问题吗？

Answer 1

使用 ng-src 代替 src

<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">

Answer 2

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

文档 ： https://docs.angularjs.org/api/ng/directive/ngSrc

 <div ng-controller="myCtl">
        <div ng-repeat="(key, value) in cities">
                <p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
        </div>
</div>