带有 angularjs 的 style="-webkit-mask-image: url()" 中的 HTTP 404

【问题标题】：HTTP 404 in style="-webkit-mask-image: url()" with angularjs带有 angularjs 的 style="-webkit-mask-image: url()" 中的 HTTP 404
【发布时间】：2021-02-27 12:12:17
【问题描述】：

我需要使用 css url() 函数将 模板链接 指定到样式中的蒙版图像。代码是这样的：

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

它会生成 404 错误，而“imagefilename”没有被替换为它的值。有没有办法避免这种行为，类似于在<img> 中将src 替换为ng-src？

【问题讨论】：

标签： css angularjs url

【解决方案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);

【讨论】：

非常感谢您的提示。 <div class="someclass" ng-style="{'-webkit-mask-image': 'url(https://img.website.com/{{imagefilename}}.png)'}"> 为我工作！