'Background image in tailwindcss using dynamic url (React.js)

I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?

javascriptcssreactjstypescripttailwind-css


Solution 1:[1]

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

<div
  style={{'var(--image-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.

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.

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

Solution 2:[2]

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:

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:

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

Solution 3:[3]

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

You could try something like below

From Doc example (HTML)

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

In JSX it would be something like(I might be getting the syntax wrong.)

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

Solution 4:[4]

If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.

Solution 5:[5]

you can just use backgroundImage in Style

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

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

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tenshi Munasinghe
Solution 2
Solution 3 ch4nd4n
Solution 4 user8583848
Solution 5 Mostafa Alavi

Related Questions