Material-UI CardMedia image not showing

Question

I've applied the styling on to CardMedia but the image still doesn't show

<CardMedia 
    style = {{ height: 0, paddingTop: '56.25%'}}
    image={thread.url}
    title={thread.title}
/>

thread.url is just a link to the image, so I believe it should be working Am I doing it correctly or is there a different way to show the image?

Answer 1

If you use create-reac-app it means you probably also use Webpack. Webpack requires you to specify all dpendencies using:

import imageUrl from './image.jpg'

And then you can use it as following:

image={imageUrl}

You can find more information about using Webpack with Create React App here

Answer 2

I had the same error, I added style and set height for image and CardMedia started working. Additionally I put my images in public folder but it is working also with external links.

  <CardMedia
    style={{ height: "250px", paddingTop: "2%" }}
    component="img"
    image={"/pancakes.jpg"}
    title="Picture"
    alt="pic"
  />