ajax - Angular.js-过滤img src标签

Question

我们主要使用Angular作为搜索表单，这非常复杂。我们使用 Solr 作为搜索框架，并通过 AJAX / JSONP 获得我们的搜索结果，这非常完美。

每个搜索结果中都应该有一张图片，但是可能没有图片。
当搜索结果中没有img-URL时，我使用过滤器来防止Internet Explorer中令人讨厌的“X”。

angular.module('solr.filter', []).
    filter('searchResultImg', function() {      
        return function(input) {
            if (typeof(input) == "undefined") {
                return "http://test.com/logo.png";
            } else { 
                return input;
            }
        };
});

我的链接图像在源代码中如下所示:

<a href="{{doc.url}}"><img src="{{doc.image_url | searchResultImg}}"/></a>

就像我说的，信息传递正确，我遇到的“问题”是Firebug使用Angular src发送GET请求，例如:

http://test.com/foldername/%7B%7Bdoc.image_url%20|%20searchResultImg%7D%7D

链接已编辑，因此将无法使用。其他客户都吓坏了;)

有没有人有这种行为的经验或知道更好的方法来设置src-tag过滤器？

Answer 1

尝试将src替换为ng-src以获得更多信息，请参阅the documentation或this post。

<a href="{{doc.url}}"><img ng-src="{{doc.image_url | searchResultImg}}"/></a>

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.