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, May 22 '18 at 01:21
Try opening the generated image url direct in your browser: http://localhost:3000/images/covers/cover-slug.png, check if the path is correct — Pedro Fernandes, May 22 '18 at 01:57
@Developerkt did not work either! it's much easier if i got an error. but get nothing. — jmv, May 22 '18 at 03:06
this link may help you : https://stackoverflow.com/questions/5846637/why-an-inline-background-image-style-doesnt-work-in-chrome-10-and-internet-ex?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Kamalesh M. Talaviya, May 22 '18 at 03:18
@Developerkt did not help either. but thanks for the effort! really appreciate it! — jmv, May 22 '18 at 03:36
did you try using `backgroundImage: `url(images/covers/${item.cover})`` instead of background and url should not be enclosed whthin quotes — karthik, May 29 '18 at 07:55
did not work, you need template strings `` to access the map function inside the style — jmv, May 30 '18 at 01:04
thats a typo this is what i mean '{backgroundImage: `url(images/covers/${item.cover})' }' — karthik, May 30 '18 at 06:48
please, check your chrome developer console network tab if images are received there — alireza, May 31 '18 at 05:46
@KomolafeTolulope but using img tag sure works! but then again i need it on the background for looping — jmv, Jun 01 '18 at 02:21
I took a look at the sandbox. It doesn't seem like you have an images folder. You should have an `images` folder with a `covers` subdirectory — Komolafe Tolulope, Jun 05 '18 at 14:02

score 6 · Answer 1 · edited Apr 25 '20 at 15:40

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 '20 at 15:40

סטנלי גרונן

2,917
23
46
68

answered Apr 25 '20 at 12:09

Matteo Manzo

61
1
5

Welcome to SO! Please know that answers need explanation. – new Q Open Wid Apr 25 '20 at 14:03

Liam · Answer 2 · 2018-05-31T16:27:59.337

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 '18 at 16:27

answered May 25 '18 at 03:16

Liam

6,517
7
25
47

i defined it under style.css – jmv May 26 '18 at 02:06
yeah no luck. but if i try it does appear. – jmv May 26 '18 at 02:55
yes i've check the exact same path. it does appear in – jmv May 26 '18 at 03:05
https://codesandbox.io/s/5v0308l68k here you go, i can't upload images folder says it's unauthenticated? – jmv May 26 '18 at 03:59
Module not found: Can't resolve './images/covers' this is what i receive – jmv May 30 '18 at 01:02
same result, my images folder is inside the public folder. just so you know. – jmv May 30 '18 at 02:23
Are you sure `{item.cover}` incloded the image extention, like `1.png`? – Liam May 30 '18 at 02:51
no code, unreachable code? . where do i exactly put that – jmv May 30 '18 at 07:32
Module not found: Can't resolve '../public/images/covers' – jmv May 31 '18 at 01:08

score 0 · Answer 3 · answered May 28 '18 at 03:41

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 '18 at 03:41

Reed Dunkle

3,408
1
18
29

uhh, i'm getting the filename from a table check db.json, inline with the item.id – jmv May 28 '18 at 03:55
oh yeah, sorry. I'll keep looking – Reed Dunkle May 28 '18 at 04:12
I think this is the solution: https://stackoverflow.com/a/30868078/6172657 – Reed Dunkle May 28 '18 at 04:16
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. – Reed Dunkle May 28 '18 at 14:15
where can i find that? sorry i'm quite new to this. – jmv May 29 '18 at 01:43

score 0 · Answer 4 · answered May 29 '18 at 09:17

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.

score 0 · Answer 5 · answered May 31 '18 at 19:33

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>

uhh, i use map() to access the paths cause i have the filename under my db.json — jmv, Jun 01 '18 at 00:37
Yes thats fine just import the files before using via dynamic imports and use the import name to use images or other media — Rohan Girdhani, Jun 01 '18 at 05:05

score 0 · Answer 6 · answered Dec 31 '18 at 16:24

0

Try this:

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

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

answered Dec 31 '18 at 16:24

Ruham

749
10
32

score 0 · Answer 7 · answered Jan 29 '19 at 03:50

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

inline style css background in react not showing

7 Answers7