我认为最好的解决方案是按照您的建议使用style属性。Tailwind CSS并不真正处理动态数据，而是使用类名来为元素添加预定义的样式。如果不使用style属性，最好的方法是有条件地在元素中添加/删除className，但这需要您提前知道图像的URL。这就违背了从API获取数据的目的。
我会做：

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

编辑：看起来你可以使用Tailwind来做类似于上面https://tailwindcss.com/docs/background-image的代码。代码如下所示：

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

我想我已经找到了一个解决方案，而不是简单地使用样式属性。

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

这个很好用。
虽然它看起来有点乏味，但它可以用来启用悬停、聚焦等样式属性无法实现的背景图像。

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

自定义属性的这种应用可用于实现具有从API获取的顺风状颜色的动态值。

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

您可以只使用样式中的backgroundImage

const bag2 = "https://via.placeholder.com/500"

<div 
    className = "someting"
    style={{backgroundImage: `url(${bag2})`}}

</div>

如果您在2022年遇到了同样的问题，那么这就是我在tailwind版本^3.0.23中的帮助。我只是将图像移动到公共文件夹，并使用tailwind.config.js中的链接，如backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" }，其中/public/img 是我在公共文件夹中放置图像的目录，你的可能不一样。然后在我的项目中调用CSS，比如bg-cover-pic，这就是它所需要的。

即使是最新的任意值实现-它似乎不工作的动态网址。在我的情况下，图像是来自一个API。如果是这样的话，坚持风格属性。
在下面的解决方案中- bgImage是一个道具。

<div className={`justify-center  bg-no-repeat bg-cover bg-center rounded-lg`} 
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>

顺风文件：https://tailwindcss.com/docs/background-image#arbitrary-values
您可以尝试以下内容
来源文档示例（HTML）

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

在JSX中，它可能是这样的（我可能把语法弄错了）。

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