错误如下：

除了我的图片之外，其他一切都显示正常。我使用的是保存在本地计算机中的图片，VC 编辑器控制台中没有出现任何错误。我在开发者工具控制台中收到错误。

./card/index.jsx

import React from 'react'
const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.img} alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}

export default Card

./reports/index.jsx

import React from 'react';
import Card from './Card';
import Data from './Card/data';

function createCard(Data){
    return <Card
    src={Data.src}
    alt={Data.alt}
    desc={Data.desc}
    value={Data.value}
    />
}


const Reports = () => {
    return (
        <div className="reportsDiv">
           { Data.map(createCard)}
            
        </div>
    )
}

export default Reports
   

        

数据文件

import img1 from "./img.jpg";
const Data=[
    {
        id:1,
        img:"{img1}",
        alt:"helloworld",
        desc:"Sdfasdf",
        value:"5GB" 
    },
    {
        id:2,
        img:{img1},
        alt:"helloworld",
        desc:"Sd",
        value:"35GB"
    },
    {
        id:3,
        img:{img1},
        alt:"helloworld",
        desc:"asdf",
        value:"3GB"
    }
]

export default Data;
     
    

如果我在卡片组件中给出这样的值，它就会起作用：

 {/* <Card 
                img={img1}
                alt="helloworld"
                desc="System Junk"
                value="35GB" 
                />
                
                       
                <Card 
                img={img1}
                alt="helloworld"
                desc="Sdfasdf"
                value="35GB" 
                />
                <Card 
                  



img={img1}
                alt="helloworld"
                desc="vhghhjghjg"
                value="35GB" 
                />
               */}
  

但是如果我使用 map 函数， src 将变得未定义。请帮忙。提前感谢帮助。