Issue trying to load image from json path in CRA app

I'm unable to load images from src/assets/image in my CRA app. I'm trying to avoid putting these images in my public folder but for some reason that seems to be the only way they will be displayed.

I have a json file homepageinfo.ts with a path

export const homepageinfo: homepageinfoType = {
  ...
  hero_portrait: "testimg.jpg",
};

A util function file dataClient to import json files with the function getHomePageInfo.

export const getHomePageInfo = () => {
  return homepageinfo;
};

and another file HomeTitle.tsx

import React from "react";
import { Grid, Header, Image, Segment } from "semantic-ui-react";
import { getHomePageInfo } from "utils/dataClient";

export const HomeTitle = () => {
  let homepageinfo = getHomePageInfo();

  return (
    <Grid columns={2}>
      ...
      <Grid.Column
        only="tablet computer"
        verticalAlign="bottom"
        textAlign="right"
      >
        {console.log(require("assets/image/" + homepageinfo.hero_portrait))}
        <Image as="img"
          className="img_portrait"
          spaced={"left"}
          src={require("assets/image/" + homepageinfo.hero_portrait)}
        />
      </Grid.Column>
    </Grid>
  );
};

The console.log is able to return a value for assets/image/homepageinfo.hero_portrait however it still appears blank in the actual Image component.

If I move the image to the public folder it can display but I do not want to have to put these images inside of the public folder.