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

Cannot load images from my desktop on React

enter image description hereI have a folder Images on my desktop with .jpg and .svg on my src file that I would like to add on a component but I cannot load them. I don't understand what I'm doing wrong. Can someone help?
import React from 'react';
import './Banner.css';
const Banner = () => {
return (
<div className="banner">
<img src="../Images/banner.bg.jpg" alt="banner" />
<div className="text">
<img src='../Images/party-icon.svg' alt="party" />
<h3>Let's The Fun Begin!</h3>
<p>Thanks for your order, we'll have it with you as soon as possible.<br></br>
Your order number is #10293838 and a confirmation email has been sent to the address provided.</p>
<p>Order Even Faster in Future</p>
<button className="button">CREATE AN ACCOUNT</button>
</div>
</div>
);
}
export default Banner;

You can import those separate images & use it on src, or you can use require.
If you place your Images directory inside public folder then you can access your images directly like this
src="/Images/banner.bg.jpg"
Check the answers of this question (Correct path for img on React.js), I think that may help you to understand those solutions better.

1 - Your images should sit inside your project source (usually in a 'assets'/'images') folder.
2 - Make sure that the source path in <img src='../Images/party-icon.svg' alt="party" /> is relative to the current file and points to the party-icon.svg sitting in your assets folder.

You may import the pic on top like this:
import bg from '../Images/banner.bg.jpg'
then add your pic like this:
<img src={bg} alt="banner" />
you can do the same thing for other pics. Instead of bg you can write anything you want. Choosing appropriate names for different pictures can be better.
Good luck :)

How to call Dynamic Image in Background from API?

I am trying to call an Image dynamically from thesportsdb API.
After destructuring, I am trying to set the image in the background of this div. But It doesn't show the image. It only works when I add a static image in CSS. It's a react practice project and everything else is working fine.
How may I solve this?
<div style={{background: strStadiumThumb}} className="banner-img">
<img className='img-fluid' src={strTeamBadge} alt="" />
</div>

Firstly, please add the relevant code directly into the question, not pictures of code. Secondly, background isn't a valid div tag attribute. If you want to inline the background style, you can use the style attribute, which is an object property that lets you inline CSS styles into your element:
<div style={{ backgroundImage: `url(${strStadiumThumb})` }} className="banner-img>
...

AngularJS uploader module: how to access file url before upload?

I'm using angular file upload (https://github.com/nervgh/angular-file-upload/wiki/Module-API) and currently trying to access the uploaded file url before saving (so I can use it as a background image). I realize that you can easily create a thumbnail of the file, but I'm having issues accessing the url so I can use it as a background image (since I want to position the image and not scale it and show the whole image as thumbnail would do).
So I can access the image for a thumbnail:
<div ng-repeat="item in uploader.queue">
<div ng-thumb="{ file: item._file, height: 202, width: 376 }"></div>
</div>
But this does not work (I'm assuming because item._file is the actual image and background-image requires a url)
<div ng-repeat="item in uploader.queue">
<div class="row" ng-style="{'background-image':'url({{item._file}})'}">
</div>
Syntax wise, I know the ng-style is fine since I tried replaced the item._file above with a public url and the styling worked as expected. I also tried replacing item._file with item.url since url is a property of it and url is apparently null so that didn't work. Any ideas on how I can achieve this or alternate solutions?

Materialize Parallax Initialization on Meteor

I'm using materializecss as a front-end framework for my personal website I am currently developing. I used their starter Parallax template and everything works, but for some reason my Parallax images are not showing. I believe it has something to do with the initialization.
snippet of one of the parallax for the HTML:
<template name="parall">
<div class="parallax"><img src="/public/background1.jpg">
</div>
</template>
JS:
if (Meteor.isClient) {
Template.parall.onRendered(function(){
$(".parallax").parallax();
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}

Have you tried rendering your images with css?
.parallax {
background-image: url("/background1.jpg");
}

Simply try removing "public" from your img src, and instead use "/background1.jpg". [ Assuming "public" directory is in your route project folder ].
You dont have to specify "public" while accessing resources stored in public directory. It is one among the few reserved directory names in meteor structure.

Wrap your div.parallax in div.parallax-container

Wrap the div in a parallax-container as already posted
<div class="parallax-container">
<div class="parallax"><img src="/images/parallax1.jpg"></div>
</div>
and add the following in your CSS
.parallax{
position:static!important
}