使用 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

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

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

但是您将使用 img 作为 Card 组件中的来源：

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>
    )
}

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

Image not getting displayed when using Reactjs map function. Error--SRC undefined

arrays

image

reactjs

map-function