image-effects icon indicating copy to clipboard operation
image-effects copied to clipboard

How to use effects with dynamic images

Open CGraabaek opened this issue 5 years ago • 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?

CGraabaek avatar Mar 26 '20 10:03 CGraabaek

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.

Totobriac avatar Mar 11 '21 09:03 Totobriac