Question

我想重新加载具有相同url inside指令的div的背景图像。当我的视图加载时，我使用此指令将图像显示为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);

        }
    });

我的html元素看起来像这样

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

它工作正常，但是我会让用户重新上传他的个人资料图片，所以在上传之后，我想用相同的网址刷新背景图片。我怎样才能实现呢？上面的代码似乎不起作用。

Answer 1

你的问题很可能是因为随机字符串中的空格（由于（新Date()).toString()）你要附加来从浏览器获取刷新的图像。空格意味着你生成了一个糟糕的图像网址，所以您可能希望将url包装在引号中或使用刻度线。

尝试将其更改为： -

          element.css({
              'background-image': 'url("' + n + '")', //Wrap url in quotes
              'background-size': 'cover'
            });

或者只是勾选并附加它。

      var random = new Date().getTime();

如何使用相同的url inside指令重新加载背景图像

1 个答案: