JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
<img ng-src="imgnotexist.jpg" user-avatar>
</div>
JavaScript
var app = angular.module("app", []);
app.controller('dummy', function($scope, $location) {
})
.directive('userAvatar', function() {
return {
link: function(scope, element, attrs) {
var placeholder = 'http://fayimora.com/content/images/2015/01/hello_world.gif';
scope.$watch(function() {
return attrs.ngSrc;
}, function (value) {
if (!value) {
element.attr('src', placeholder);
}
});
element.bind('error', function() {
element.attr('src', placeholder);
});
}
};
});