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

Question

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

原文由 Tenshi Munasinghe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这工作得很好。

虽然看起来有点繁琐，但它可以用来在 hover、focus 等情况下启用背景图像，这是 style 属性无法做到的。

 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>

原文由 Tenshi Munasinghe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

我会做：

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

编辑：根据 https://tailwindcss.com/docs/background-image ，看起来您实际上可以使用 Tailwind 来执行与上面的代码类似的操作。代码如下：

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

原文由 user17995848 发布，翻译遵循 CC BY-SA 4.0 许可协议