dynamic img-src with placeholder image

Question

I all I have the following predicament. I unfortunately can't share a plunkr as the image is coming from a protected site and I am not aware of any open URL that serves constantly changing images. I can't switch to a local animated image as it needs to be on an external server to demonstrate the problem. But the concept is pretty straight forward.

I have the following URL that I am using to display an image. Now the server that is sending this image is constantly changing this image at approximately 3 frames per second.

<img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass{{LoginData.password}}&rand={{rand}}" width="100%" style="backgroundimage:url('http://placeholder.com/placeholder.jpg');"/>

Now here is the problem: -- I want to show a place holder text or image for the following instances: a) Sometimes, it takes time for the server to render the first frame b) Sometimes the server just does not seem to send images

What I really want to avoid is the screen not remaining blank - that confuses the user

The problem I am facing is that the moment img-src start, the screen turns white and in a few seconds the images start streaming (situation a above) or the screen remains blank for a long time (situation b)

I've tried various methods: a) As you see in the code above, I've tried a background image. That only shows if an error is returned by the img-src (for example, I forcibly change the url to an invalid one or its not reachable). What is happening with me is that it shows up momentarily, but the moment img-src is encountered the screen turns white (till images start coming from the server)

b) I've tried various methods including the app.directive global image trap method in if a ngSrc path resolves to a 404, is there a way to fallback to a default?

But the core problem really is that my situation does not involve an error in the image. It seems like as if the server gets stuck or delayed but its not returning an error in HTTP ==> and in that duration, my window for the image turns white. And I'd like to solve that by putting in a text on top of it (or an image on top of it), but only till real images start being received.

Thank you

score 1 · Answer 1 · answered Apr 29 '15 at 16:17

for my own need, I made a directive displaying a placeholder image if the servers has an error :

.directive('placeholderImg', function() {
    //default place holder
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var img = window.scriptRoot + 'img/divers/avatar_min.jpg';
            if (attr.placeholderImg) {
                switch (attr.placeholderImg) {
                    case 'profile':
                        img = 'img/avatar.png';
                        break;
                    case 'profile_small':
                        img = 'img/avatar_min.png';
                        break;
                    case 'profile_large':
                        img = '/img/nothumb.png';
                        break;
                    //Add more placeholders
                } 
            }

            //If ngSrc is empty
            if (!attr.ngSrc)
                element[0].src = img;

            //If there is an error (404)
            element.on('error', function() {
                element[0].src = img;
            });

        }
    };
});

And I use it like this:

<img data-ng-src="{{app.picture}}" data-placeholder-img="profile_large">

I understand that your main issue is that you want to display something while the image is loading. Maybe you can modify my directive, to set element[0].src to a placeholder at the beginning of the code and overloading it by binding the load event once it's loaded (the same way I have bound the error event).

Alexandre, I am trying to take baby steps. I added this directive to app.js .directive('img', [function () { return { restrict: 'EAC', link: function (scope, element, attrs) { console.log("**** IN DIRECTIVE "); } }; }]) Is this correct? img-ngsrc is not invoking this directive. — user1361529, Apr 29 '15 at 17:14
It seems the img directive is being called, just not in an ionic-modal. I'll investigate why — user1361529, Apr 29 '15 at 18:05
Alexandre, I've fixed the issue above. You are right, I debugged the issue - it takes a while for the server to transmit the image to the client (its around 110k) - I need a placeholder image till them. Can you please expand on your suggestion? — user1361529, Apr 30 '15 at 01:00
thank you, I solved my problem - I'll post the solution tomorrow - your guidance helped — user1361529, Apr 30 '15 at 01:50

score 0 · Answer 2 · answered Apr 05 '18 at 07:55

Moving away from having most of the logic on the JS size I propose using background image in css instead. We can have a tiny little icon on top of a grey background as our placeholder and then when the image url has loaded we use the power of zindex to overlay the image on top of the color and icon. I wrote a post about it here.

dynamic img-src with placeholder image

2 Answers2