I am trying to use image in a card component using map function in js.Everything except the image is working fine

import React from 'react'
import Card from '@material-ui/core/Card'import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import {makeStyles} from '@material-ui/core'
import { red } from '@material-ui/core/colors';
import chennai from '../img/chennai.jpg';
import mumbai from '../img/mumbai.webp';
import delhi from '../img/delhi.webp';
import hyderabad from '../img/hyderabad.jpg';
const styles  = makeStyles((theme)=>(
{
    root:{
        maxWidth:300,
    },
    media:{
        height: 0,
        paddingTop: '56.25%',
    },
    location:{
        color:red,
        paddingLeft:'10px'
    }
}
))



const Places = () => {
const placeDetails = [
    {
        img:mumbai,
        name:'MUMBAI'
    },
    {
        img:delhi,
        name:'DELHI' 
    },
    {
        img:hyderabad,
        name:'HYDERABAD' 
    },
    {
        img:chennai,
        name:'CHENNAI' 
    }
]
const classes = styles();
console.log(placeDetails[0].img)
return (
    <div>
        {
        placeDetails.map(({img,name})=>(
            <Card className={classes.root}>
            <img
            src={img}
            className={classes.media}
            alt="no img"
            />
             <CardContent>
                <h3 className={classes.location}>
                    {name}
                </h3>
             </CardContent>
          </Card>
        
        ))

         }
        
    
            <div>
                
            </div>
    </div>
   )
}

 export default Places

I will attach the output below so that is easy to see

enter image description here

I am also adding the directory structure here

enter image description here

As you can clearly see that the problem is with the image , i don't know how to import an image and use it in reusable components.I am a newbie.Can anyone help me with this?