React Pass Image URL to child component

Question

I'm trying to render a different background image for a child component depending on the URL that is passed through props.

The background images are stored in the public folder under a file called images

public/images/bg_1.jpg

Current I have this:

Parent component

import React from "react";
import Nav from "./Nav";
import SubNav from "./SubNav";
import Footer from "./Footer";
import PageHero from "./PageHero";
import backgroundImage from '../../public/images/bg_1.jpg';

const MainPage = () => (
  <div>
    <Nav />
    <SubNav company="Main Company" />
    <PageHero BackgroundURL={backgroundImage}/>
    <Footer />
  </div>
);

export default MainPage;

Child component (PageHero)

import React from "react";

export class PageHero extends React.Component {
  render(props) {
    return (
      <div>
        <div
          class="page-hero uk-light"
          style={{ backgroundImage: `url(${props.BackgroundURL})` }}
        >
          <div class="uk-container uk-container-medium uk-text-center">
            <h1 class="uk-heading-primary page-hero__header uk-animation-fade">
              Page Heder
            </h1>
          </div>
        </div>
      </div>
    );
  }
}

export default PageHero;

But I get this error when I try to link the src:

ERROR in ./public/images/bg_1.jpg You may need an appropriate loader to handle this file type.

is this possibly an issue with webpack or the way I'm referencing the image?