Is there a way to add an image from a JSON array, to a Card Media object in MUI?

Viewed 116

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.

0 Answers
Related