使用动态url(React.js)的tailwindcss中的背景图像

Question

我有一个从API获取的图像url，我想将其显示为背景图像。有没有什么方法可以用tailwindcss实现这一点，或者我应该使用styles属性？

Answer 1

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

<div
style={{'--image-url': `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={{'--color': fetchedColor}} 
className='text-[color:var(--color)]'>
<!-- ... -->
</div>

Answer 2

我认为最好的解决方案是按照您的建议使用样式属性。Tailwind CSS并不真正处理动态数据，而是处理类名，以便为元素添加预定义的样式。在不使用style属性的情况下，最好是有条件地从元素中添加/删除classNames，但这需要您提前知道图像URL，这与从API获取图像URL的目的背道而驰。

我会做：

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

编辑：看起来您实际上可以使用Tailwind按照https://tailwindcss.com/docs/background-image.代码看起来像：

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

Answer 3

您可以在样式中使用backgroundImage

const bag2 = "https://via.placeholder.com/500"
<div 
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>

Answer 4

即使使用了任意值的最新实现，它似乎也不适用于动态URL。在我的案例中，图像来自API。如果是这种情况，请坚持样式属性。

在下面的解决方案中，bgImage是一个道具。

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

Answer 5

如果你在2022年遇到同样的问题，那么这就是顺风版本^3.0.23的帮助。我只是把图像移到了公用文件夹，并使用了tailwind.config.js中的链接，就像backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" }一样，/public/img是我把图像放在公用文件夹中的目录，你的可能不同。然后在我的项目中调用类似于bg-cover-pic的css，就这样完成了。

Answer 6

我刚转到html到jsx在线转换器https://magic.reactjs.net/htmltojsx.htm粘贴了我从顺风网站复制的东西-

<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>

然后我就复制了我新生成的jsx代码-style={{ backgroundImage: 'url(/about.jpg.webp)' }}

Answer 7

externalImageUrl可以是任何托管的图像的url

<div
className="w-full h-48 bg-no-repeat bg-cover"
style={{ backgroundImage: "url(" + externalImageUrl + ")" }}
></div>