image or src property in CardMedia is not working when changing using getElementById()

[worstkiller]

Hi guys first of all thanks for making this wonderful library. I am new to React and has started my projects using this framework.
While using i had a small problem related to CardMedia, when ever i am trying to change the image or src property using document.getElementById() or something related to this, it's not changing anything. Here is code if i am doing it wrong.

<CardMedia id="testImage"
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />

//javascript code for manipulating image source
const testUrl = "https://www.fatbit.com/fab/wp-content/uploads/2015/12/material-design-3.jpg";
document.getElementById("testImage").src = testUrl;
console.log(document.getElementById("testImage"));

//here is console output 
<div class="MuiCardMedia-root-7129 SimpleMediaCard-media-7100" id="testImage" title="Contemplative Reptile" style="background-image: url("/static/images/cards/contemplative-reptile.jpg");"></div>

My Environment

Tech	Version
Material-UI	v1.2.0
React	16.4.0
browser	chrome 66

[adeelibr]

Do you want to do something like this

document.getElementById("testImage").style['background-image'] = 'url("https://avatars3.githubusercontent.com/u/10533214?s=88&v=4")'

[worstkiller]

hi @adeelibr your example worked but this property belongs to CSS I guess for setting background image on some view but what about the source since a image can have a source as well as background and i was trying this using the material docs. Just curious if i can do this using docs or i am doing wrong or it was meant to be done like the way you did only. thanks for the help.

image	string		Image to be displayed as a background image. Either image or src prop must be specified. Note that caller must specify height otherwise the image will not be visible.
src	string		An alias for image property. Available only with media components. Media components: video, audio, picture, iframe, img.

Will close this soon just waiting for some replies on doing using docs.

[adeelibr]

Oh if you want to change the image for CardMedia the proper way in React, I suggest you do something like this.

class Examples extends React {
    state = {
       imgSrc:  '/static/images/cards/contemplative-reptile.jpg',
     };
     componentDidMount() {
        DUMMY_API_CALL_EXAMPLE().then(response => {
             this.setState({ imgSrc: response.imageUrl }); // example supposedly 
        });
     }
     render() {
         const { imgSrc } = this.state;
         return (
           <CardMedia 
             // id="testImage" // you don't need this anymore
              className={classes.media}
              image={imgSrc}
              title="Contemplative Reptile"
            />
         );
     }
}

[oliviertassinari]

I'm closing for #11675 where we look into using a <img> element.

@adeelibr Thanks for answering @worstkiller's question.