TypeScript x CRA: require for images

[sumanthratna]

Hi! I imagine this is a very common question, but I haven't found any solutions online. Using JSX, I can do:

<img
    id={`img-normal-${sponsorID}`}
    src={require(`../../../images/sponsors/normal/${logo}`)}
/>

which works as expected.

with TSX, I'm trying:

{/* eslint-disable import/no-dynamic-require */}
<img
    id={`img-normal-${sponsorID}`}
    src={require(`../../../images/sponsors/normal/${logo}`)}
/>
{/* eslint-enable import/no-dynamic-require */}

where logo is a string specifying the filename.

but when I run yarn start, the images aren't loading because the src attribute is populated with [object Module], not the path to the static file. When I run yarn build, the images are copied to the static/media folder.

I've tried import image from imagePath; but that raised an error because imports need to be at the top of the file. I also tried const image = require(imagePath); but that didn't resolve the error.

Does anyone know how to solve this issue?

[sumanthratna]

wow...I don't think this is a JS vs TS issue; this is a CRA 3 vs CRA 4 issue. filing an issue now.

[bennettdams]

Not sure if this helps, but I had a case where I combined useRef and useEffect to dynamically populate an image:

const imageAsset = useRef();

useEffect(() => {
    try {
        imageAsset.current = require(`../../../images/sponsors/normal/${logo}`);
    } catch (e) {
        console.error(e);
    }
}, [logo]);

<img
    id={`img-normal-${sponsorID}`}
    src={imageAsset.current}
/>

[sumanthratna]

that looks like a clever workaround (although a little hacky) but I don't think it works on CRA 4 either:

function App() {
  const imageAsset = React.useRef();

  React.useEffect(() => {
      try {
          imageAsset.current = require('./logo.svg');
      } catch (e) {
          console.error(e);
      }
  }, ['logo']);

  return (
    <div className="App">
      <header className="App-header">
        <img src={imageAsset.current} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

[trugr]

Did you ever find a solution to dynamically requiring images in Typescript?