angularjs – 使用ng-src vs src

发布时间：2020-12-17 09:04:35 所属栏目：安全来源：网络整理

导读：这个 tutorial演示了使用指令ngSrc而不是src： ul class="phones" li ng-repeat="phone in phones" class="thumbnail" img ng-src="{{phone.imageUrl}}" /li/ul 他们要求： Replace the ng-src directive with a plain old src attribute. Using tools such

这个 tutorial演示了使用指令ngSrc而不是src：

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

他们要求：

Replace the ng-src directive with a plain old src attribute.
Using tools such as Firebug,or Chrome’s Web Inspector,or inspecting the
webserver access logs,confirm that the app is indeed making an
extraneous request to /app/%7B%7Bphone.imageUrl%7D%7D (or
/app/{{phone.imageUrl}}).

我这样做，它给了我正确的结果：

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

有什么原因吗？

<img ng-src="{{phone.imageUrl}}">

这给出了预期的结果，因为phone.imageUrl被评估并且在加载angular之后被其值替换。

<img src="{{phone.imageUrl}}">

但是，这样，浏览器尝试加载名为{{phone.imageUrl}}的图像，这会导致请求失败。您可以在浏览器的控制台中进行检查。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!