Best way to pass images in static react app

I'm using react to create a web-app that has to be static so no API calls and I need to store some data client-side (I'm currently just using a single JSON file as it's really not large) but I'm struggling to pass images down, I'm storing the references as strings in the JSON file and passing them to the props but I'm getting all sorts of errors. Is there a better or more practical way to do this?

Code (I've added a variable to imitate the JSON structure):

const HomePage = () => {     let projectInfo: ProjectInfo = {        title: "Project",        description:           "A progressive web app.",        imgURL: "./TODO", //<- HERE        mainColour: "#323232",        secondaryColour: "#464646",     };       return (        <div id="carousel-container">           <Carousel labels={["1"]}>              <ProjectPanel info={projectInfo} />           </Carousel>        </div>     );  };    export default HomePage;    interface IProjectPanelProps {     info: ProjectInfo;  }    const ProjectPanel = (props: IProjectPanelProps) => {     return (        <div className="project-panel">           <h2>{props.info.title}</h2>           <p>{props.info.description}</p>           <img src={/* ?? */} alt=""></img>        </div>     );  };  

https://stackoverflow.com/questions/66737667/best-way-to-pass-images-in-static-react-app March 22, 2021 at 05:19AM