How to using dynamic url for background image with tailwindcss react js

在React中使用TailwindCSS动态设置背景图像通常涉及到几个步骤。但是，TailwindCSS默认情况下并不直接支持将动态URL用作背景图像，因为它使用PurgeCSS来删除未使用的样式，并且希望在构建时能知道所有可能的类名。要解决这个问题，我们可以使用内联样式或通过修改Tailwind配置来生成必要的背景图像类。下面我将介绍两种方法。

方法一：使用内联样式

这是设置动态背景图像的最简单方法，因为它不需要修改TailwindCSS的配置。你可以直接在React组件中使用内联样式来设置背景图像：

jsx
function MyComponent({ imageUrl }) {
  // 使用内联样式直接设置背景图像
  const style = {
    backgroundImage: `url(${imageUrl})`,
    // 其它你想要添加的TailwindCSS样式
  };

  return <div style={style} className="bg-no-repeat bg-center bg-cover ...">...</div>;
}

方法二：通过TailwindCSS配置

如果你想使用Tailwind的工具类而不是内联样式，那么你需要在你的tailwind.config.js文件中动态地生成背景图像类：

js
// tailwind.config.js
module.exports = {
  // 其它配置...
  theme: {
    extend: {
      backgroundImage: theme => ({
        'dynamic-pattern': "url('/path/to/image.jpg')", // 用实际的图像路径替换这里
        // 你可以根据需要添加更多背景图像
      }),
    },
  },
  // 其它配置...
}

然后在你的React组件中使用这个自定义的背景图像类：

jsx
function MyComponent() {
  // 假设你已经在tailwind.config.js中添加了名为'dynamic-pattern'的背景图像
  return <div className="bg-dynamic-pattern bg-no-repeat bg-center bg-cover ...">...</div>;
}

要使这个方法更加动态，你可以编写一个小的函数，它根据图像URL生成一个唯一的类名，并在构建过程中将此类名和URL添加到配置文件中。然而，这种方法可能会导致配置文件的大小显著增加，并且需要一些自定义逻辑来处理图像URL的插入和类名的生成。

注意

两种方法都有其优缺点。使用内联样式是最直接的方法，但它不会利用到Tailwind的PurgeCSS能力，可能会导致样式文件体积增加。通过TailwindCSS配置可能会更符合Tailwind的工作流程，但它可能需要额外的设置，并且在构建时需要知道所有可能的背景图像URL，这可能在某些动态场景下不实际。

选择哪种方法取决于你的具体需求和项目设置。如果背景图像是用户动态生成的内容，方法一可能更合适。如果背景图像可以预先知道，或者是有限的选择集，方法二可能是一个更好的选择。

2024年6月29日 12:07 回复

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

shell
<div
  style={{'--image-url': `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.

shell
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.

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

2024年6月29日 12:07 回复

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:

shell
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:

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

2024年6月29日 12:07 回复

you can just use backgroundImage in Style

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

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

</div>

2024年6月29日 12:07 回复

Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs. In my case image was coming from an API. If it is the case, stick to style attribute.

In the solution below - bgImage is a prop.

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

2024年6月29日 12:07 回复

5个答案

方法一：使用内联样式

方法二：通过TailwindCSS配置

注意

你的答案