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

Material UI v5 cardMedia images not showing in deployed site – Reactjs

I am mapping an array of objects to display a set of MUI cards with the "cardMedia" component. The images show well in my localhost but when I deployed to netlify, the images were broken.

This is the mapped code

{
          AboutUs.map(info=>(
            <Card key={info.id} className='shadow-none bg-transparent'>
              <CardMedia
                component="img"
                image={info.imgUrl}
                className='w-16 h-auto ml-3'
              />
              <CardContent>
              <p className='text-2xl font-bold mr-2 my-3.5'>{info.title}</p>
              <p className='text-base'>{info.information}</p> 
              </CardContent>
            </Card>
          ))
        }

Below is the exported Data;

export const AboutUs = [
  {
    id:1, 
    title:"Property Insurance",
    information:"We offer our customer property protection of liability coverage and insurance for their better life.",
    imgUrl:"./src/assets/icons-large/property_insurance.svg"
  }
]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently this issue was because I was using React Vite, I solved the issue by placing my entire assets folder in my public folder and since it was a root path I called it from the array like this;

    export const AboutUs = [
  {
    id:1, 
    title:"Property Insurance",
    information:"We offer our customer property protection of liability coverage and insurance for their better life.",
    imgUrl:"/assets/icons-large/property_insurance.svg"
  },
]

    Now the page renders without issues in Netlify


  2. 0

    as you addressed the imgUrl in your localhost directory, you’ve to require the image in order to be bundled with your app so it can be displayed in your VPS.

    <CardMedia
  component="img"
  image={require(info.imgUrl)}
  className='w-16 h-auto ml-3'
 />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search