How to Add Dynamic Images as Background Without Violating CSP?

[MonaAghili]

To dynamically set an image as a background for a component, one approach is using inline styles, like this:

<div
  style={{ '--image-url': `url(${url})` }}
  className='bg-[image:var(--image-url)]'
>
  <!-- ... -->
</div>

However, this method can run into issues when Content Security Policy (CSP) is enabled, as CSP often blocks inline styles for security reasons. So, Could you suggest alternative solutions to dynamically set background images?