Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React CardMedia URL images not loading

React MaterialUI component – CardMedia does not show the image when we provide a URL to the given
prop – image={imageURL}

<CardMedia
  component="img"
  sx={{
    height: 140
  }}
  image={imageLink}
  alt={imageLink.split("/")[4]}
/>

Output-Image

A few examples for the CardMedia Docs are presented here – CardMedia Code Examples
but none showed a CardMedia using an image source given by a URL.

The previous question asked did not resolve the issue – Material-UI CardMedia image not showing

Tags:

2

Answers


  1. 0

    If you are using img as component then you have to use src={imageLink}

    but the working way is as below:

    React js

    <CardMedia sx={{ height: 140 }} >
    <img image={imageLink} alt={imageLink.split("/")[4]} />
</CardMedia>

    Next js

    import Image from 'next/image';


<CardMedia component="img" sx={{ height: 140 }} >
    <Image src={imageLink} alt={imageLink.split("/")[4]} />
</CardMedia>

    That’s it.

    Login or Signup to reply.
  2. 0

    Looks like your issue is with the provided media URL.
    Try this and check the error log.

    <CardMedia
  component="img"
  height="194"
  image="https://www.example.com/static/images/cards/paella.jpg"
  alt="Paella dish"
  onError={(e) => {
    console.error("Error loading image:", e.target.src);
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search