angularjs：ng-src等效于background-image：url（…）

小编典典

angularjs：ng-src等效于background-image：url（…）

css

在angularjs中，您具有标记ng-src，其目的是在angularjs评估介于{{和之间的变量之前，不会收到无效网址的错误}}。

问题是，我使用了一些带有background-imageURL设置的DIV 。我之所以这样做，是因为CSS3具有出色的属性background- size，可以将图像裁剪为DIV的确切大小。

唯一的问题是，由于创建ng-src标记的原因完全相同，因此我收到很多错误：我的url中有一些变量，浏览器认为该图像不存在。

我意识到有写粗略的可能性{{"style='background-image:url(myVariableUrl)'"}}，但这似乎是“肮脏的”。

我已经搜索了很多，却找不到正确的方法。由于所有这些错误，我的应用变得一团糟。

阅读 509

2020-05-16

共1个答案

小编典典

ngSrc是一个本机指令，因此您似乎想要一个类似的指令来修改div的 background-image样式。

您可以编写自己的指令来实现您想要的功能。例如

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});

您将这样调用

<div back-img="<some-image-url>" ></div>

2020-05-16