1

I'm trying to get a div background-image property set in React, but no image is shown (and Chrome debugger is not showing background-image as being set for this div in the DOM). Could this have something to do with the image not being loaded? Here's my code:

import './Map.css';

function Map() {
  const style = {
    backgroundImage: '../assets/gs100.jpeg',
    height: "100vh",
    backgroundSize: "cover",
  }
  return (
    <div style={style}>
      <canvas ></canvas>
    </div>
  );
}

export default Map;

Here's how I do it outside of React, which works...

var url = "content/maps/gs100.jpeg";

var mapImage = new Image();
mapImage.src = url;
mapImage.onload = function () {
    $('#mapBackgroundDiv').css("background-image", "url(" + url + ")"); 
};
Chris Goldfarb
  • 11
  • 1
  • It worked! I swear I tried that exact solution about 4 hours ago (groan)! Thanks a ton. Sorry I'm new, how do I flag this as the solution? – Chris Goldfarb Feb 15 '21 at 23:59
  • The system will automatically show a banner that says "This question already has an answer". – yaakov Feb 16 '21 at 15:08

0 Answers0