Me gustaría renderizar imágenes dinámicamente en una página web en reaccionar. Puedo hacer esto si las imágenes existen en el backend haciendo algo como esto:

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

donde la representación de la condición se parece a esto

 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;

Esto funciona. El problema es que parece que necesito la instrucción require. Cuando compilo este código [npm con paquete web]'./generatedData/imgs/LatvsLongprecluster.png' puede que aún no exista. La imagen que creo depende de la entrada del usuario y se crea mediante una solicitud posterior. Si la solicitud es buena, establece el indicador en verdadero y muestra la imagen creada.

Entonces, la PREGUNTA es ¿cómo puedo sortear las declaraciones require o import? Tengo entendido que está vinculado en el momento de la compilación, por lo que ¿existe realmente una forma de crear y cargar imágenes dinámicamente en reaccionar?