inline style css background in react not showing

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

You could try backgroundImage instead of background? If you post a jsfiddle I could help more. — Ben Lorantfy
– Ben Lorantfy, Commented May 22, 2018 at 1:21
Try opening the generated image url direct in your browser: localhost:3000/images/covers/cover-slug.png, check if the path is correct — Pedro Fernandes
– Pedro Fernandes, Commented May 22, 2018 at 1:57

groenhen · Accepted Answer · 2020-04-25 15:40:16Z

6

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.

edited Apr 25, 2020 at 15:40

groenhen

3,02725 gold badges51 silver badges69 bronze badges

answered Apr 25, 2020 at 12:09

Matteo Manzo

611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

new Q Open Wid Over a year ago

Welcome to SO! Please know that answers need explanation.

Reed Dunkle · Accepted Answer · 2018-05-28 03:41:33Z

0

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})`
};

answered May 28, 2018 at 3:41

Reed Dunkle

3,6071 gold badge23 silver badges30 bronze badges

5 Comments

jmv Over a year ago

uhh, i'm getting the filename from a table check db.json, inline with the item.id

Reed Dunkle Over a year ago

oh yeah, sorry. I'll keep looking

Reed Dunkle Over a year ago

I think this is the solution: stackoverflow.com/a/30868078/6172657

Reed Dunkle Over a year ago

Can you share your webpack config? I'm guessing that you can get it to work if (1) webpack properly transpiles the files, and (2) you have the correct transpiled path.

jmv Over a year ago

where can i find that? sorry i'm quite new to this.

Johnson Samuel · Accepted Answer · 2018-05-29 09:17:28Z

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.

Liam · Accepted Answer · 2018-05-31 16:27:59Z

0

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

edited May 31, 2018 at 16:27

answered May 25, 2018 at 3:16

Liam

6,8037 gold badges28 silver badges48 bronze badges

9 Comments

jmv Over a year ago

i defined it under style.css

jmv Over a year ago

yeah no luck. but if i try <img> it does appear.

jmv Over a year ago

yes i've check the exact same path. it does appear in <img>

jmv Over a year ago

codesandbox.io/s/5v0308l68k here you go, i can't upload images folder says it's unauthenticated?

jmv Over a year ago

Module not found: Can't resolve './images/covers' this is what i receive

|

Rohan Girdhani · Accepted Answer · 2018-05-31 19:33:54Z

0

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>

answered May 31, 2018 at 19:33

Rohan Girdhani

276 bronze badges

2 Comments

jmv Over a year ago

uhh, i use map() to access the paths cause i have the filename under my db.json

Rohan Girdhani Over a year ago

Yes thats fine just import the files before using via dynamic imports and use the import name to use images or other media

Ruham · Accepted Answer · 2018-12-31 16:24:36Z

0

Try this:

backgroundImage: "url(" + require("../../img/img.png") + ")"

assuming the img.png is in img folder under src (webpack)

answered Dec 31, 2018 at 16:24

Ruham

77910 silver badges37 bronze badges

Comments

kama mishael · Accepted Answer · 2019-01-29 03:50:37Z

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

Collectives™ on Stack Overflow

inline style css background in react not showing

7 Answers 7

1 Comment

5 Comments

Comments

9 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

5 Comments

Comments

9 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related