Angular.js - Filter in img src tag

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.