inline style css background in react not showing - css

Question

What is the problem in my code? This is a slider:
<Slider {...settings}>
{slides.map(function(item){
return (
<div key={item.id} className="item-slider"
style={{background: `url(images/covers/${item.cover})`}}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
</Slider>
I'm using react-slick, and I tested if the item.cover is receiving some data, and it did receive data. but when I put the data in the style it does not appear inspecting it and it does not receive any errors.
Sample: code here

Answer 1

I had the same issue, try wrapping every slide into a div like this:
<Slider {...settings}>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${House})`}} />
</div>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${Map})`}} />
</div>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${NotAvailable})`}} />
</div>
</Slider>
This way I got it working.

Answer 2

I think I got it. Try importing the image at the top of the file, and then using the import variable as the url. I got it to work:
https://codesandbox.io/s/xvnq2q21w4
import photo from "../img/reed.jpg";
const styles = {
background: `url(${photo})`
};

Answer 3

Below is an example I tried to load images in the background and it worked :)
Sample response. Here you can see, I have added require.
const items = [{
name: 'hola',
background: require('./img-placeholder.png')
},{
name: 'cola',
background: require('./img-placeholder.png')
},{
name: 'lola',
background: require('./img-placeholder.png')
}]
const renderImages = items.map((val, key) => {
return <div key={key} >
<div style={{ background: `url(${placeholder})`, height: 200 }}>
<div className="caption">
<h4>{val.name} - {key}</h4>
</div>
</div>
</div>
});
Note : The require() method is used to load and cache JavaScript modules. So, if you want to load a local, relative JavaScript module into a Node.js application, you can simply use the require() method.

Answer 4

You missing to define:
require()
height image
backgroundRepeat
<Slider {...settings}>
{slides.map(function(item){
console.log(item.cover, 'check this');
return (
<div key={item.id} className="item-slider" style={{
background: 'url(' + require(`./images/covers/${item.cover}`) + ')', backgroundRepeat: 'no-repeat', height: 300 }}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
</Slider>
Update: as you mentioned in comments that the path is from the public folder use process.env.PUBLIC_URL to access public folder
<div key={item.id} className="item-slider" style={{
background: 'url(' + process.env.PUBLIC_URL +`/images/covers/${item.cover}` + ')', backgroundRepeat: 'no-repeat', height: 300 }}>

Answer 5

You have to import image at the top of your file as
import myimage from './images/covers/imagename';
Also you can use dynamic importing like :
import(`${path}`)
.then(module => this.setState({ module: module.default }))
Then you can use image, where cover would be import name like:
<Slider {...settings}>
{slides.map(function(item){
import(`${path}`)
.then(module =>
return (
<div key={item.id} className="item-slider"
style={{background: `url(images/covers/${item.cover})`}}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
); )
})}
</Slider>

Answer 6

Try this:
backgroundImage: "url(" + require("../../img/img.png") + ")"
assuming the img.png is in img folder under src (webpack)

Answer 7

Okay, for some reason you can't add styling to the element you are using to house the return content. So here's what you're gonna do:
<Slider {...settings}>
{slides.map((item) => {
return(
<div key={item.id} className="sliderImage">
<div className="backImage" style={{background:`url(/images/covers/${item.cover})`}}>
<div className="slideCaption">
<h4>{item.title}</h4>
<h1>{item.topic}</h1>
</div>
</div>
</div>
)
})}
</Slider>
I hope this helps you solve your problem. ;)