I would like to dynamically render images to a webpage in react. I can do this if the images exist on the backend doing something like this:

render(){ return(....
<CondRenderImg
shouldRender={this.state.jobDone}
imgPath={require('./generatedData/imgs/LatvsLongprecluster.png')}
/>
);
}

where the condition render looks something like this

import React from "react";




class CondRenderImg extends React.Component{
    constructor(props){
        super(props);
    }

    render() {
        const doRender = this.props.shouldRender;
        if(doRender){
            return(

                <img src={this.props.imgPath} style={{ height: "450px", width: "100%" }} alt={"viz"}/>
            );
        }
        else {
            return (
                <div>
                </div>
            );
        }

    }

}export default CondRenderImg;

This much works. The problem is that I seem to need the require statement. When I compile this code [npm with webpack]'./generatedData/imgs/LatvsLongprecluster.png' may not exist YET. The image I create is dependent on user input and is created by a post request. If the request is good it sets the flag to true and shows the created image.

SO the QUESTION is how can I get around the require or import statements? My understanding is that it is bonded at compile time so is there truly a way to dynamically create and load images in react?