javascript - React JS (JSX) div not rendering unless text is added to div -


i trying render image inside div tag using styling want image dynamically resize based upon size of window.

here jsx code

const heroimage = "pathtoimage";  const heroimagestyling = {   backgroundimage: `url(${heroimage})` };  reactdom.render(   <div style={heroimagestyling}></div>,   document.getelementbyid("root") ); 

running doesn't render on page

if text added div tag so, small portion of image rendered screen (a long strip same height text)

<div style={heroimagestyling}>test text</div> 

how correct problem , render image screen?

div without content , width height won't render. can have 2 approaches here:

  1. put &nbsp; inside div (when don't want define width/height)

reactdom.render( <div style={heroimagestyling}>&nbsp;</div>, document.getelementbyid("root") );

  1. define either width or height or both in div styling

const heroimagestyling = { backgroundimage:url(${heroimage}), height: 200px, width: 200px }; reactdom.render( <div style={heroimagestyling}></div>, document.getelementbyid("root") );


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -