How to reload a css background-image inside a directive


Tags: javascript,css,angularjs

Problem :

In Angular, I have directive that loads a background-image attribute. How do I get the background image to reload on demand?

app.directive('profilePhotoPreview', function () {
    return {
        restrict: "A",
        scope: {
            uuid: "="
        },
        template: "",
        link: function (scope, element, attrs) {
            scope.$watch('uuid', function (value) {
                console.log('profilePhotoPreview ',value);
                if (scope.uuid) {
                    scope.preview = "url('"+conf.s3 + "user_profile_photos/" + scope.uuid + ".jpg')";

                    var s={'width':'400px', 'height':'400px','background-image': scope.preview}
                    element.css(s);
                }

            })

        }
    }
});

In this scenario, the underlying photo has been changed (ie a new profile photo has been uploaded), but the url is the same.

I've tried setting a $watch on the uuid variable and flipping its value from null back to its old value to fool Angular into re-rendering the css, but this has no effect.



Solution :

In this case browser has already cached that image. To reload it you can add '?xxxx' to image url, where 'xxxx' is a random string.

I mean you only need to change your scope.preview variable when you want to reload pic:

scope.preview = "url('"+conf.s3 + "user_profile_photos/" + scope.uuid + ".jpg?"+getRandomInt(0, 10000)+")";

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

    CSS Howto..

    How to apply SVG filter to an element?

    CSS dropdown submenu with dynamic width: how to align left?

    How do I apply css code for svg in google api charts

    How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to use same css for separate media query conditions

    How to configure simple_form to show validation status

    Css how to replace block after click button

    How to use sprite images in html/css and toggle change with jQuery

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How to change css file of bx-slider, multiple sliders on a page [closed]

    How do I fix the image size when changing to another image?

    CSS: how to add white space before element's content?

    How to make xsl show only images/captions from xml

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to detect CSS inheritance source?

    How to create a dropdown with lu and li tags like this

    Hide field on small viewport, click button to show again

    How to set angular json model into css

    How to Apply CSS Style Code into My Custom TextView in Android

    How to change color of Bootstrap warning class table row

    Need the background to change when the mouse goes over the selected tab. How?

    DOMPDF - How to render PDF to have no margins at all?

    How to use if else blocks to decide style in Razor?

    How to link to a CSS if a certain condition happens?

    SVG, how to evaluate the property of the svg object

    Using yepnope, how can I know if a css resource was loaded successfully?

    Create dom elem on the fly or hide/show

    How to generate regular CSS file from SASS?

    How to add a table inside a div with its CSS working