We Keep Coding

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?

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>

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>

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

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>

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.

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)' }}

Image cannot get parent attributes

*Sorry for formatting: typing from the phone.
Hello guys!
Help me please with a problem: embedded img inside div not changing it's width in respect to it's parent.
<div display="block" position="absolute" width="608.5px" height="480.5px" text-align="center" top="20%" left="50%">
<img src="here_is_source" width="100%" height="auto">
</div>
So, I can't use CSS because I'm appending it using JS (element.appendChild), as well as creating properties of the element using element.setAttribute.
Thank you for suggestions, guys!

You can not set the props you are setting directly to a div. Use style, or insert a CSS style in the JS you describe.
Below solution solves your issue as stated, however also consider using
element.classList.add("my-class");
<div style="display:block;position:absolute; width:608.5px;height:480.5px;text-align:center;top:20%;left:50%;">
<img src="https://via.placeholder.com/400" width="100%" height="auto"/>
</div>

how to change the color of a div element when an image is dragged onto it?

I am uploading an image using an input tag and fileReader.
I have made the image draggable using drag and drop API of angular material. Also, there are 2 divs.
The following code shows it.
<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img id="blah" [src]="url" alt="your image" cdkDrag/>
<div class="box1">
hi
</div>
<div class="box2">
hi
</div>
<div class="box3">
hi
</div>
My requirement is that, when I drag the image into one of the div boxes, the color of the div should change. Right now I am able to drag the image into the div boxes but how do I change the color of the div when the image is dragged on to it.

From the code provided, I have the following idea.
Steps:
check which parent node is the related div by using document.querySelector('#blah').parentNode
assign the related DOM to a variable as follow:const divNeeded = document.querySelector('#blah').parentNode
Suppose you have some color defined in your css file, let say it is called relatedStyle, you can add it to divNeeded by using .classList.add('relatedStyle').
Example for the style in CSS file:
.relatedStyle{
background-color: blue
}

Display img only when it has a title?

Basically in my ASP.NET MVC4 project I'm trying to have my validationmessages as tooltips (which gets displayed when hovered over a certain image).
Right now the error message is inserted into the image title - however I'd like to ONLY display the image when it has a title (when it doesn't have a title there is no error message).
How can I do this?
I don't suppose it is possible through CSS so a js/jquery solution would work too.
To clarify I need to check update the display as the title changes during runtime.
An initial check is not gonna do it.

Here is the pure CSS solution.
The CSS Code:
img{display:none;}
img[title]{display:block;}
Here is a WORKING DEMO
The HTML:
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" title="" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
The CSS:
img{display:none;}
img[title]{display:block;}
Hope this is what you are looking for.

Only display images with a title?
$('img').filter(function(i, el){
return !$(el).prop('title');
// (empty/undefined titles evaluates as false)
}).hide();
Is this what you're asking for?
Perhaps this css selector is enough (will only work in modern browsers):
img:not([title])
{
display: none;
}

Javascript output won't accept any CSS styling

I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.

There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom

The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.