CODEWITHSUNDEEP
javascriptcssreactjstypescripttailwind-css
Tenshi Munasinghe
Tenshi Munasinghe

Reputation: 1236

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?

Upvotes: 32

Views: 88847

Answers (9)

Himant
Himant

Reputation: 21

I faced the same Issue while trying something like this:

<DisplayCard customText="..this is resolved and working" customImage="the-dynamic-image-not-working.jpg"/>

But a tweak like below worked:

<DisplayCard customText="..this is resolved and working" customImage="bg-[url('/the-dynamic-image-now-working.jpg')]"/>

...and in my DisplayCard component I used that like this:

export default function DiaplayCard({customText, customImage}) {
 return(
   <div 
     className={`... ${customImage} bg-cover bg-center ...`}
     ...
     />
    ...    
  )}

Upvotes: 0

Connor Campbell-Bisson
Connor Campbell-Bisson

Reputation: 1

So, what I ended up doing was putting the fetched url into a static const, which was then used as the className.

const background = = "bg-[url(" + fetchedUrl + ")]"

Return {
  <div className={`${background} ((Other tailwind here))`}>
}

Edit: Ignore me because I'm an idiot. This technically worked, but only in a test build when I previously loaded a static test className. Then it stuck around but wouldn't work if I terminated the batch job and ran it again.

Upvotes: -1

Tenshi Munasinghe
Tenshi Munasinghe

Reputation: 1236

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

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

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

Upvotes: 73

Sakar
Sakar

Reputation: 567

The externalImageUrl can be url to any image hosted

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

Upvotes: 0

Shariar Parvez Tonmoy
Shariar Parvez Tonmoy

Reputation: 1

I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -

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

then I just copied my new generated jsx code- style={{ backgroundImage: 'url(/about.jpg.webp)' }}

Upvotes: 0

Ankur Sehdev
Ankur Sehdev

Reputation: 136

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.

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

Upvotes: 6

Mostafa Alavi
Mostafa Alavi

Reputation: 139

you can just use backgroundImage in Style

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

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

</div>

Upvotes: 12

Luck1609
Luck1609

Reputation: 344

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.

Upvotes: 0

user17995848
user17995848

Reputation: 237

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>

Upvotes: 22

Related Questions