I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.

I would do:

style={{backgroundImage: `url(${fetchedImgSrc})`}}

Edit: It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image. The code looks like:

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

I think I have found a solution other than simply using a style attribute.

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

This works perfectly fine.

Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.

className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'

This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.

<div
  style={{'var(--color)': fetchedColor}} 
  className='text-[color:var(--color)]'>
    <!-- ... -->
</div>

Tailwind Doc: https://tailwindcss.com/docs/background-image#arbitrary-values

You could try something like below

From Doc example (HTML)

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

In JSX it would be something like(I might be getting the syntax wrong.)

<div className=`bg-[url('{DYNAMIC_IMG_PATH}')]`>
  <!-- ... -->
</div>