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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.