How to use effects with dynamic images
CGraabaek opened this issue · 1 comments
CGraabaek commented
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?
Totobriac commented
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.