How to reload the background image with the same url inside directive - css

Question

I want to reload the background image for a div with the same url inside directive. When my view load, I used this directive to show the image as a background to a div
app.directive('backImg', function () {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
attrs.$observe('backImg',function(n,o){
if(!n) return;
element.css({
'background-image': 'url(' + n + ')',
'background-size': 'cover'
});
},true);
}
});
My html element looks like this
<div data-ng-if="vm.user.user_id!==undefined" data-back-img="{{vm.serviceUrl}}/image/user/{{vm.user.user_id}}"
class="user-img-div" style="width:100%; height:100%;"></div>
It works fine, but what happens I give a user to re-upload his profile image, so after it uploads, I want to refresh the background image with the same url. How can I make it happen? The above code not seems to be working.

Answer 1

Your issue most possibly is because of spaces in the random string (due to (new Date()).toString()) that you are appending to get the refreshed image from the browser. Spaces mean that you generate a bad image url, so you probably want to wrap url in quotes or use ticks.
Try changing it to:-
element.css({
'background-image': 'url("' + n + '")', //Wrap url in quotes
'background-size': 'cover'
});
Or just get the ticks and append it.
var random = new Date().getTime();