Angular Domsanitizer: Sanitizing Mask-image Not Working

When providing a background image for an element, everything works fine:

But how can I provide a mask-image

Solution 1:

According to the documentation, for CSS masks to work with chrome, you need to prefix the rules with -webkit-

So this shoud work

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

Note: According to W3C recommendations, the images you are using for the mask must be returned with correct CORS headers.

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all , and values on the mask-image, mask-border-source and clip-path properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value none had been specified.

Solution 2:

Try this :-

[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"