Question

We use Angular mainly for our search form, which is pretty complex. We use Solr as search framework and get our search results via AJAX/JSONP, which works perfectly.

There should be an image in every search result, but it can happen that there is none.
I use a filter to prevent nasty “X”s in the Internet Explorer when there is no img-URL in my search result.

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

My linked image looks like this in the source code:

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

Like I said, the infos are delivered correctly, the “problem” I have is that Firebug sends a GET request with the Angular src like:

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

The link is edited, so it won’t work. Else customer freak out 😉

Does anyone have experience with this behaviour or knows a better way to set filters for src-tags?

Answer 1

Try replacing src with ng-src for more info see the documentation or 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.