Question

在Angular中，我有一个加载background-image属性的指令。如何根据需要重新加载背景图像？

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

            })

        }
    }
});

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

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

Answer 1

在这种情况下，浏览器已经缓存了该图像。要重新加载它，您可以将'？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;
}

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

1 个答案: