如何在指令中重新加载 CSS 背景图像

Question

在 Angular 中，我有加载背景图像属性的指令。如何让背景图片按需重新加载？

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);
                }

            })

        }
    }
});

在这种情况下，基础照片已更改（即已上传新的个人资料照片），但 url 是相同的。

我尝试在 uuid 变量上设置 $watch 并将其值从 null 翻转回其旧值以欺骗 Angular 重新渲染 css，但这没有效果。

Answer 1

在这种情况下，浏览器已经缓存了该图像。要重新加载它，您可以将“？xxxx”添加到图片网址，其中“xxxx”是一个随机字符串。

我的意思是你只需要在你想重新加载图片时改变你的 scope.preview 变量：

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;
}