Inline background-image in React

Question

I am trying to set a background image via inline styles in React.

After looking through a few posts this one's solution worked for me:

<div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>

I pasted that directly into my component without changing the link just to test it, and it worked. But now that I am trying to reference an image from my /src folder it isn't working.

<div className='background-image' style ={ { backgroundImage: "url('../../../../images/products/cards/main.jpg')" } }>asdfasdfasdfasdf</div>

Nothing shows up and I am not getting any error or warning.

Any help would be really appreciated!

Check this link - stackoverflow.com/questions/39195687/…

koolkat
– koolkat

2017-08-21 23:57:25 +00:00
Commented Aug 21, 2017 at 23:57 — koolkat
– koolkat, Commented Aug 21, 2017 at 23:57

Gage Hendy Ya Boy · Accepted Answer · 2017-08-21 23:45:45Z

15

I figured it out, you can't just put a link straight into url. You need to require it first.

var bg=require('../../../../images/products/cards/main.jpg')
return (      
  <div className="ProductItem">

      {/* Background Image */}
      <div className='background-image' style ={ { backgroundImage: "url("+bg+")" } }></div>

answered Aug 21, 2017 at 23:45

Gage Hendy Ya Boy

1,5944 gold badges20 silver badges37 bronze badges

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

2 Comments

Miguel Over a year ago

That's not necessary, you just need to ensure that the image you're trying to load is in a public path (If you access that path with your browser the image is visible)

user3808307 Over a year ago

@Miguel sometimes the image you need to load is not in a publica path and you can't ensure it will be

Masud Rana · Accepted Answer · 2020-06-29 10:28:30Z

6

Hello

Everybody after some Research I found a better solution for this question like this

import BannerBgImg1 from "../../assets/static/img/banner/banner_bg_img_1.jpg";

<div className="bannerInnerItem" style={{backgroundImage: `url(${BannerBgImg1})` }}>

is the best way to use this

edited Jun 29, 2020 at 10:28

answered Feb 26, 2020 at 11:46

Masud Rana

6501 gold badge9 silver badges20 bronze badges

1 Comment

AlainIb Over a year ago

it should be background instead of backgroundImage

Klod Lala · Accepted Answer · 2019-12-08 13:20:43Z

1

 const Images = [
    require('./greenbanner.jpg'),
    require('./greengrass.jpeg'),
    require('./opengreen.jpg')   ];

This is for an array of images that should be required
we need to require them when they cannot be loaded

answered Dec 8, 2019 at 13:20

Klod Lala

1731 silver badge9 bronze badges

Comments

Masud Rana · Accepted Answer · 2019-12-19 07:04:23Z

1

I hope Background Img is very common. So please try to use it. It is very easy to use. At first you should import img and then easily use it in your jxs file.

import InnerBgImg from "../../assets/static/img/banner/inner_banner_bg_static.jpg";
return (
    <div className="inner_banner" style={{ backgroundImage: "url(" + InnerBgImg +")" }}>

answered Dec 19, 2019 at 7:04

Masud Rana

6501 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

Inline background-image in React

4 Answers 4

2 Comments

Hello

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Hello

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related