JSFiddle - React, Tailwind, and code Playground

by ipeshev

JavaScript

goproDirectives.directive('noImage', function () {
        var setDefaultImage = function (el) {
            el.attr('src', "../../images/default-user.svg");
            
        };
        return {
            restrict: 'A',
            link: function (scope, el, attr) {
                var unwatch,
                    $el = $(el);
                $el.css('visibility', 'hidden');
                $el.load(function () {
                    $el.css('visibility', 'shown');
                }).error(function () {
                    setDefaultImage(el);
                    unwatch();
                });
                unwatch = scope.$watch(function() {
                    return (attr.ngSrc || attr.gpSrc);
                }, function () {
                    var src = (attr.ngSrc || attr.gpSrc);

                    if (!src) {
                        //Performance
                        unwatch();
                        setDefaultImage(el);
                    }
                });

                //el.bind('error', function() { setDefaultImage(el); });
            }
        };
    });