dynamically load an image as a prop in react - reactjs

Question

I am trying to load images dynamically in react and pass them as props. I have a data.json file that is basically an array of article objects.
title:"article1"
headline:"headline1"
image:"/src/images/articleimage1"
articleContent:"ipsum lorem"
in the first component I map through the array and return a "card" with props
const featuredArticles = imageCardArray.map(elem => <ImageCard
title={elem.title}
headline = {elem.headline}
image= {elem.image}
/>)
return (
<div className ="center">
{featuredArticles}
</div>
then I use those props in the card component itself. It all works perfectly except for the images
function ImageCard(props) {
return (
<div className="imageCard">
<Card>
<CardActionArea>
<CardMedia
component="img"
image={props.image}
title={props.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.headline}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" varient="outlined">
Artigo completo
</Button>
</CardActions>
</Card>
</div>
);
}
export default ImageCard;
any ideas how to load these images? the card component is from material UI if it helps. (it says in the docs that the image property just accepts a string)
I can get the image to load in the card by importing it at the top and then image = {image}, but of course then it is not dynamic and all the cards have the same image. please help!! thanks

Answer 1

You need to import the image from directory at top
import ArticleImg1 from 'image path';
and then construct your array of objects like this
{
title:"article1"
headline:"headline1"
image:ArticleImg1
articleContent:"ipsum lorem"
}
If I understand your question correctly it will work.

Answer 2

the answer is here https://medium.com/react-courses/5-top-methods-to-import-and-load-images-dynamically-on-cra-react-local-production-build-855d3ba3e704
you need to have in your json just the file name for the image, not the full path.
title:"article1"
headline:"headline1"
image:"articleimage1"
articleContent:"ipsum lorem
then in the card component:
you can either assign the resource to a component ...
const Image = require( '/src/images/'+ props.image);
and in the JSX
<img className="card-img-top" src={ Image } alt="image not found" />
or do the require in the jsx
<img className="card-img-top" src={ require( '/src/images/'+ props.image) } alt="image not found" />
assumption made that all images will be in the same folder...