使用图像的 SRC 将子级传递给父级时出现问题。反应 JS

Posted 2023-02-22

【中文标题】使用图像的 SRC 将子级传递给父级时出现问题。反应 JS

【英文标题】：Problem passing child to parent with SRC of image. REACT JS

【发布时间】：2021-05-04 11:16:28

【问题描述】：

你好吗？

我的情况是下一个。我正在将一个包含信息的数组传递给一个组件，以使用 map() 进行渲染。 名字和头衔很适合我。

但我无法通过图像的 SRC。我已经尝试了所有我能想到的方法，但没有。

在数组中，我留下了我尝试过的不同路径，但什么也没有。 谢谢！

我的组件：

import React from 'react';
import  TeampeopleData  from '../Components/TeampeopleData';



function Aboutus() 
    return (
        <div className='about'>

                <div className="about-text">
                    <h1 className='about-text-title'>ABOUT US</h1>
                    <h2 className="about-text-big">We work until we see the invisible</h2>
                    <h2 className="about-text-small">Because it is our passion to serve our clients to the utmost satisfaction, we go against all odds to meet your expectations. We can’t promise you the world but here’s one thing we can assure you: We like to be as clear as we possibly can. We’ll hound you – one, two, three meetings – as many as it takes to get it right! We’re not perfectionists. We just want to make YOU the happiest.
                    </h2>
                </div>
            <div className="about-team">
                <h2 className="about-team-title">Our Team</h2>
                <div className="about-team-people">
                    TeampeopleData.map((item)=>
                        return(
                            <div className='people'>
                                <div className="people-img">
                                    <img src=item.photo  className="team-people-photo"/>
                                </div>
                                <h2 className="people-name">item.name</h2>
                                <p className="people-title">item.title</p>
                            </div>
                        )

                    )
                </div>
            </div>


        </div>
    )


export default Aboutus

我的阵列

import people1 from '../img/people1.jpg';


export const TeampeopleData =[

    
        photo: people1,
        name: 'Blas Garcia',
        title: 'Founder'
    ,
    
        photo: '/src/img/people1.jpg',
        name: 'Patrick O’donnel',
        title: 'Marketing'
    ,
    
        photo: '../img/people1.jpg',
        name: 'Olivia Wralikszowa',
        title: 'Art Director'
    

]

enter image description here

【问题讨论】：

您需要将这些图像添加到编译器添加 app.js 代码的公共或编译文件夹中。并使用 photo: './img/people1.jpg', name: 'Olivia Wralikszowa', title: 'Art Director'

之类的图像

【参考方案1】：

只要去掉 people1 周围的支架就可以了。

    photo: people1,
    name: 'Blas Garcia',
    title: 'Founder'
,