样式中的 HTTP 404="-webkit-mask-image: url()" 和 angularjs

Question

我需要使用 css url() 函数将 模板化 link 指定为蒙版图像。代码是这样的：

<div class="someclass" style="-webkit-mask-image: url('https://img.website.com/{{imagefilename}}.png')">

它生成 404 错误，而“imagefilename”未替换为它的值。有没有办法避免这种行为，类似于在 <img>?

中用 ng-src 替换 src

Answer 1

尝试使用 ng-style 而不是 style。 ng-style 需要是一个对象。在控制器中格式化可能更容易。

// In controller 
$scope.setStyle = function(url){
    return {
        “webkit-mask-image”: “url(“ + url + “)”
    };
};

此外，-webkit-mask-image 的 URL：url( ) 不应包含在括号中。通过 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

-webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);

HTTP 404 in style="-webkit-mask-image: url()" with angularjs