Creo que la mejor solución es hacer lo que sugirió y usar un atributo de estilo. Tailwind CSS no trata realmente con datos dinámicos, sino con nombres de clase para agregar estilos predefinidos a su elemento. Lo mejor que podría hacer sin usar el atributo de estilo es agregar/eliminar condicionalmente classNames de un elemento, pero eso requeriría que conozca la URL de la imagen con anticipación, lo que anula el propósito de obtenerla de una API.

Yo lo haría:

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

Editar: parece que en realidad puedes usar Tailwind para hacer algo similar al código anterior según https://tailwindcss.com/docs/background-image . El código se parece a:

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

Creo que he encontrado una solución que no sea simplemente usar un atributo de estilo.

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

Esto funciona perfectamente bien.

Aunque parece un poco tedioso, se puede usar para habilitar la imagen de fondo al pasar el mouse, enfocar, etc. En lo que el atributo de estilo no puede.

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

Esta aplicación de propiedades personalizadas se puede utilizar para implementar valores dinámicos con viento de cola como colores obtenidos de una API.

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

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

Podrías intentar algo como a continuación

Del ejemplo de Doc (HTML)

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

En JSX sería algo así como (podría estar entendiendo mal la sintaxis).

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