使用 Reactjs 地图功能时图像未显示。错误--SRC 未定义

Question

这是错误：

其他所有东西都可以很好地显示，而不是我的图像。我正在使用保存在本地计算机中的图像，并且在 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 将会未定义。请帮忙。提前感谢您的帮助。

Answer 1

请注意您发送 src 作为图像源的 createCard 函数：

function createCard(Data){
    return <Card
    src={Data.src}// you're sending src as the prop
    alt={Data.alt}
    desc={Data.desc}
    value={Data.value}
    />
}

但您将在Card 组件中使用img 作为源：

const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.img} // but using img as the prop which is incorrect
                 alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}

把Card改成下面的就可以解决问题了：

const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.src} // change it to src
                 alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}