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

金属获奖者

在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，但这没有效果。

醋甲酸酯

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

我的意思是，您只需要在要重新加载pic时更改您的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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。