javascript - 我正在尝试使用 js 中的 map 函数在卡片组件中使用图像。除了图像之外的所有东西都工作正常

Question

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

我将附上下面的输出，以便于查看

我也在此处添加目录结构

您可以清楚地看到问题出在图像上，我不知道如何导入图像并在可重用组件中使用它。我是新手。谁能帮我这个？

标签： javascriptreactjs

Answer 1

src attribute in img tag expects a path. And currently you are just importing the image in your file which doesn't tells the path to the src attribute. Try this way.

{
    img: "../img/path-to-your-img",
    name: "MUMBAI"
}