Inlining background image in react

Question

The following code works for me

import c1 from "./myImage.png"

export default class MyClass extends React.Component {
  render() {
    let style = {
      backgroundImage: "url(" + c1 + ")",
    }

    return (
      <div>
        <div style={style}> </div>
      </div>
    );
  }
}

However I would like to make it inline because I have 50 images i want to display, and not have to have a style object for each one.

Specifically my code looks like this :

import c1 from "./myImage.png"    

export default class MyClass extends React.Component {
  render() {

    return (
      <div>
        <div style={{backgroundImage:"url(" + c1 + ")" }}> </div>
      </div>
    );
  }
}

This, unfortuanely does not work for me. It cannot find the image.

What am I doing wrong?