Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

IONIC1 - dynamically setting ng-src (of an image) doesn't show unless screen size is adjusted

Hi,

I haven't changed my app, but something has stopped working recently.

Basically, I have a page for employees where a REST call returns an image of the employee and this is passed to ng-src in an image component as follows:

$scope.imageSrc = "data:image/png;base64," + dataImage;
$scope.photoURL = $scope.imageSrc;

In the image element, I have:
ng-src set to: {{photoURL}}

This has always worked, but latest the image doesn't display.
When I interrogate the image element, I can see the image contains the expected data, and I can force the image to display by resizing the screen (by pulling the dev tool screen bar to the left/right).

Can you tell me how I can get over this please?
I've tried using ng-if before and after changing the ng-src, i've even tried dynamically changing the CSS to resize the image, but nothing helps.

I've just checked and this only seems to be a problem in Chrome....

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

IONIC1 - dynamically setting ng-src (of an image) doesn't show unless screen size is adjusted

Solved it, but it's a workaround.

Every time I update the image, I now call a "refresh" routine:

//force a redraw for Chrome
// in 10ms time
//
$scope.timerID = setTimeout(function() {
$scope.$apply(function() {
document.getElementById('sourcestaffimage').style.display = "none";
document.getElementById('sourcestaffimage').offsetHeight; //Only ref needed
document.getElementById('sourcestaffimage').style.display = "block";
});
}, 10);

Return to “Issues”