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

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

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

Sources

Related Questions