React passing import name as prop on img src passing as string

Question

I have a React component where I have an image path imported and then it's name passed in the img src, like this:

import { Myimage } from './images/image.jpg';

const MyComponent = (props) => (
  <div>
    <img src={Myimage} alt="" />
  </div>
);

The above works fine but I want to pass the name of the import using a prop but it's returning a string so it won't work.

Here's the code:

const MyComponent = (props) => (
  <div>
    <img src={props.myprop} alt="" />
  </div>
);

Here is the call:

<MyComponent myprop="Myimage" />

How can I pass an import name in the img src?

Answer 1

Try this...

<MyComponent myprop={Myimage} />