[CardMedia] Add component property

[AndriusBil]

Fixes: #8233

If component="img" specified, then renders img element instead of div.
Now it's possible to set srcSet and sizes attributes.
Backwards compatible (in case any users already have custom styling for div e.g. css image-set)

No documentation / examples as of initial PR.
If this implementation is acceptable, I'll add some documentation.

[cherniavskii]

What if component will be neither div nor img? I think in this case it should receive classes.root styles

[AndriusBil]

Thank you for review!

That's a proper point. I think backgroundImage should also be added to style prop in case anything else than img is specified.

[cherniavskii]

Thank you for contribution ;)

[oliviertassinari]

@AndriusBil Sounds good. The only thing that feels weird is using the image property with a img component. It would feel more intuitive using the src property.

[AndriusBil]

Thanks for comment!

I think it also feels a bit weird using src with div or table or probably most of other tags. Should I add src as alias to image or should I remove image prop?

[oliviertassinari]

Should I add src as alias to image

@AndriusBil I haven't been thinking about this solution. This one sounds good 👍 .

[AndriusBil]

I've added src prop as alias for image prop. src is only used with media components (video, audio, picture, iframe, img). For other components image is added as a css background.

While implementing it, I started questioning what is the reason for this component?

If we actually wanted to display media (be it image or video or something else) we could use standard html media components. CardMedia only adds width: 100% style for it.

[oliviertassinari]

@AndriusBil Well done :)

[adisher]

CardMedia only adds width: 100% style for it.
This line alone helped me to understand my issue with setting an svg image inside CardMedia. Thanks @AndriusBil

My problem was that svg image was fully responsive but it wasn't working with a specified width. So I changed to maxWidth and it worked fine.