javascript - 当资源不可用时，AngularJS 不断发送无效请求

Question

假设我想通过 AJAX 提取一组图像并使用 ng-repeat 在页面中显示它们。

<li data-ng-repeat="submission in submissions">
                    <a href="/entry/{{submission.slug}}" class="submission-thumb">
                      <img src="{{submission.thumbnail_url}}">
                    </a>
                    <a href="/entry/{{submission.slug}}" class="submitter-avatar">
                      <img src="{{submission.profile_picture_url}}" width="42"/>
                    </a>
</li>

问题出在上面的图片源标签上。在集合被拉入并导致日志文件中出现错误消息之前，它会不断向服务器发送以下这些无效请求。

GET http://localhost:9000/campaign/%7B%7Bsubmission.profile_picture_url%7D%7D 404 (Not Found) test:138
GET http://localhost:9000/campaign/%7B%7Bsubmission.thumbnail_url%7D%7D 404 (Not Found)

无论如何要防止这种情况发生？谢谢!

Answer 1

使用 ng 值可以防止这种情况发生:

<a ng-href="/entry/{{submission.slug}}" class="submission-thumb">
    <img ng-src="{{submission.thumbnail_url}}">
</a>

此外，我不会那样使用 width:

<img src="{{submission.profile_picture_url}}" width="42"/>

最好使用 CSS(通过类更好):

<img src="{{submission.profile_picture_url}}" style="width:42px;" />

来源:AngularJS: ng