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

Issue

I need to specify a templated link to a mask image in style using css url() function. The code is like this:

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

It generates 404 errors while "imagefilename" is not replaced with it's value. Is there a way to avoid this behavior, similar to replacing src with ng-src in <img>?

Solution

Try ng-style instead of style. ng-style needs to be an object. Might be easier to format in controller.

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

Also, the URL for -webkit-mask-image: url( ) should not be enclosed with parentheses. Via 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);

Answered By - tbone849