I am working on adding images from my JSON array (DataJSON), to my MUI Card Media objects.
The images are stored as URL strings as such.
"https:\/\/imdb-api.com\/images\/original\/MV5BMTA0OWY2Y2ItZTI5ZC00YzgxLWFlZWMtZTRmMjIyNGUyYjVhXkEyXkFqcGdeQXVyODY0NzcxNw@@._V1_Ratio2.3333_AL_.jpg"
The issue I am running into, is that I am trying to access these variables like this, but i am getting no images on screen.
<CardMedia
component="img"
sx={{
// 16:9
pt: '56.25%',
}}
src= 'DataJson.image[1]'
alt="random"
/>
I am able to access other data from that Json in a similar manner, such as this.
<Typography gutterBottom variant="h5" component="h2">
{DataJson.episodeTitle[1]}
</Typography>
What is the correct way, that I can get these image urls to render inside of the card media objects? Thank you for your time.