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