bennettfeely/image-effects

How to use effects with dynamic images

CGraabaek opened this issue · 1 comments

Hey!

I really love these CSS filters and would love to use them on something i am working on.

The problem that i run into is the

background-image: url(photo.jpg);

In my project Im only able to set the image source as:

<div class="airbrush-effect" style="width: 256px; height: 256px;">
    <img width="" height="" src="https://res.cloudinary.com/dfu5kawco/image/upload/v1584716671/game_images/1S60d4bd.png"
        alt="">
</div>

How do I modify the CSS so that it can be used with this?

I found a way o do so and I will explain it even if this question is old.
I use CSS variables and pass a dynamic value using DomSanitizer.
Here is StackBlitz: https://stackblitz.com/edit/image-effectsdynamic-pics that has a working exemple.