Setting a backgroundImage With React Inline Styles

Question

I m trying to access a static image to use within an inline backgroundImage property within React  Unfortunately  I ve run up dry on how to do this  Generally  I thought you just did as follows  import Background from     images background image png    var sectionStyle       width   quot 100  quot     height   quot 400px quot     backgroundImage   quot url  quot      Background      quot   quot      class Section extends Component     render         return          lt section style   sectionStyle   gt         lt  section gt                This works for  lt img gt  tags  Can someone explain the difference between the two  Example   lt img src   Background     gt  works just fine  Thank you

User · Answer

You Can try usimg  backgroundImage  url process env PUBLIC URL           assets image location

User · Answer

try this it worked in my case backgroundImage   url  quot   Background  quot

User · Answer

Copy the image to the React Component s folder where you want to see it  Copy the following code    lt div className  quot welcomer quot  style    backgroundImage  url   myImage      gt  lt  div gt    Give a height to your  welcomer using CSS so that you can see your image in the desired size

User · Answer

Just add required to file or url  lt div style              backgroundImage   url   require  quot   path local quot                     gt   Or set in css base64 image like div     background      url  data image gif base64 R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA       no-repeat     left center      You can use https   www base64-image de  for convert

User · Answer

For a local File in case of ReactJS  Try import Image from  quot       assets image jpg quot     lt div style    background-image   url     Image        background-size   auto      gt Hello  lt  div gt   This is the case of ReactJS with inline styling where Image is a local file that you must have imported with a path

User · Answer

Inline style to set any image full screen   style        backgroundImage   url      https   images pexels com photos 34153 pexels-photo jpg auto compress amp cs tinysrgb amp h 350           backgroundPosition   center     backgroundSize   cover     backgroundRepeat   no-repeat

User · Answer

You can try this with by adding backticks on whole url style   backgroundImage url   val image     http   max-themes net demos grandtour upload Tokyo Dollarphotoclub 72848283-copy-700x466 jpg

User · Answer

It works for me    import Background from     images background image png           lt div className            style                  background   url   Background                         gt     lt  div gt

User · Answer

For me what worked is having it like this  style    backgroundImage   url   require    resources img banners 3 jpg

User · Answer

If you are using ES5 -  backgroundImage   url     Background         If you are using ES6 -  backgroundImage   url   Background      Basically removing unnecessary curly braces while adding value to backgroundImage property works will work

User · Answer

You can use Template Literals  enclosed with back-tick         instead for backgroundImage property like this   backgroundImage   url   Background

User · Answer

try this   style    backgroundImage   url require  path image ext

User · Answer

You can also bring the image into the component by using the require   function    lt div style    backgroundImage   url require  images img svg        gt   Note the two sets of curly brackets  The first set is for entering react mode and the second is for denoting object

User · Answer

The curly braces inside backgroundImage property are wrong    Probably you are using webpack along with image files loader  so Background should be already a String  backgroundImage   url     Background        You can also use ES6 string templates as below to achieve the same effect   backgroundImage   url   Background

User · Answer

Sometimes your SVG will be inlined by React so you need quotes around it       backgroundImage   url  quot   Background  quot     otherwise it s invalid CSS and the browser dev tools will not show that you ve set background-image at all

[javascript] Setting a backgroundImage With React Inline Styles

Examples related to javascript

Examples related to reactjs