Javascript Can'；t在React应用程序中加载父组件作为道具传递给子组件的图像

我正在使用React进行一个项目。这是我的项目的文件结构

• 公开的
  • index.html
• src
  • App.js
  • 图像
    • facebook.png
    • image.PNG
    • linkedin.png
    • profile.png
    • twitter.png
  • 简介
    • profileIntro.js
  • 资料
    • data.js

在我的App.js中，我导入data.js文件，并将从中获取的数据作为道具传递给子组件profileIntro，js

这里是data.js

const user = [
    {
        id: 1,
        name: "Amelia Everleigh",
        displayPicture: "./images/profile.png",
        coverImage: "./images/image.png",
        bio: "Writer, Thinker, Human. Unapologetic feminist. Fan of incomplete sentences. Writer & content marketing speacilist at Skillly. Freelance Writer for Hire.",
        city: "Delhi",
        country: "India",
        email: "commonstartup@gmail.com",
        facebookId: "https://www.facebook.com/yash.sethia.12/",
        twitterId: "https://twitter.com/YashSethia",
        linkedinId: "https://www.linkedin.com/in/yash-sethia-852206191/" 
    }
]

export default user

import React from 'react';
import data from './data/data.js'
import './App.css';
import { Component } from 'react';
import ProfileIntroduction from './Profile Intro/profileIntro';

class App extends Component {
  constructor () {
    super();
    this.state= {
      
    };
  }

  render() {
    const userPortfolioInfo = data.map(item => <ProfileIntroduction key={item.id} userInfo={item}/>)
    return (
      <div className="main-body">
          {userPortfolioInfo}
          <articleGrid />
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import facebook from "../images/facebook.png"
import linkedin from "../images/linkedin.png"
import twitter from "../images/twitter.png";

function profileIntroduction(props) {

    // This function gets a object userInfo as a prop from App.js

    return (
        <div className="profile-intro">
            
            {console.log(props.userInfo)}

            {/* Cover Image */}

            <div className="profile-cover">
                <img className="cover-image" src={props.userInfo.coverImage} alt="" />
            </div>

            {/* Box that contains basic infomation of user */}

            <div className = "flex-container">
                {/* Profile Picture */}
                <img className="profile-img" src={props.userInfo.displayPicture} alt="Profile Picture" />

                {/* User Information */}

                <div className="profile-details">

                    <div className="profile-name">
                        {props.userInfo.name}
                    </div>

                    <div className="profile-bio">
                        {props.userInfo.bio}
                    </div>


                    <div className="profile-location">
                        {props.userInfo.city}, {props.userInfo.country} 
                    </div>


                    <div className="profile-email">
                         CONTACT: <a href="commonstartup@gmail.com"> {props.userInfo.email} </a>
                    </div>

                </div>

                {/* Social Media Handles */}

                <div className="profile-social-media">

                    <a href={props.userInfo.facebookId}> 
                        <img className="social-links"  src={facebook} alt="Facebook" />
                    </a>

                    <a href={props.userInfo.twitterId} > 
                        <img className="social-links" src={twitter} alt="Twitter" />
                    </a>

                    <a href={props.userInfo.linkedinId}> 
                        <img className="social-links"  src={linkedin} alt="LinkedIn" />
                    </a>
                    
                </div>

            </div>

        </div>
    );
}


export default profileIntroduction

这里是App.js

const user = [
    {
        id: 1,
        name: "Amelia Everleigh",
        displayPicture: "./images/profile.png",
        coverImage: "./images/image.png",
        bio: "Writer, Thinker, Human. Unapologetic feminist. Fan of incomplete sentences. Writer & content marketing speacilist at Skillly. Freelance Writer for Hire.",
        city: "Delhi",
        country: "India",
        email: "commonstartup@gmail.com",
        facebookId: "https://www.facebook.com/yash.sethia.12/",
        twitterId: "https://twitter.com/YashSethia",
        linkedinId: "https://www.linkedin.com/in/yash-sethia-852206191/" 
    }
]

export default user

import React from 'react';
import data from './data/data.js'
import './App.css';
import { Component } from 'react';
import ProfileIntroduction from './Profile Intro/profileIntro';

class App extends Component {
  constructor () {
    super();
    this.state= {
      
    };
  }

  render() {
    const userPortfolioInfo = data.map(item => <ProfileIntroduction key={item.id} userInfo={item}/>)
    return (
      <div className="main-body">
          {userPortfolioInfo}
          <articleGrid />
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import facebook from "../images/facebook.png"
import linkedin from "../images/linkedin.png"
import twitter from "../images/twitter.png";

function profileIntroduction(props) {

    // This function gets a object userInfo as a prop from App.js

    return (
        <div className="profile-intro">
            
            {console.log(props.userInfo)}

            {/* Cover Image */}

            <div className="profile-cover">
                <img className="cover-image" src={props.userInfo.coverImage} alt="" />
            </div>

            {/* Box that contains basic infomation of user */}

            <div className = "flex-container">
                {/* Profile Picture */}
                <img className="profile-img" src={props.userInfo.displayPicture} alt="Profile Picture" />

                {/* User Information */}

                <div className="profile-details">

                    <div className="profile-name">
                        {props.userInfo.name}
                    </div>

                    <div className="profile-bio">
                        {props.userInfo.bio}
                    </div>


                    <div className="profile-location">
                        {props.userInfo.city}, {props.userInfo.country} 
                    </div>


                    <div className="profile-email">
                         CONTACT: <a href="commonstartup@gmail.com"> {props.userInfo.email} </a>
                    </div>

                </div>

                {/* Social Media Handles */}

                <div className="profile-social-media">

                    <a href={props.userInfo.facebookId}> 
                        <img className="social-links"  src={facebook} alt="Facebook" />
                    </a>

                    <a href={props.userInfo.twitterId} > 
                        <img className="social-links" src={twitter} alt="Twitter" />
                    </a>

                    <a href={props.userInfo.linkedinId}> 
                        <img className="social-links"  src={linkedin} alt="LinkedIn" />
                    </a>
                    
                </div>

            </div>

        </div>
    );
}


export default profileIntroduction

从“React”导入React；
从“./data/data.js”导入数据
导入“/App.css”；
从“react”导入{Component}；
从“/Profile Intro/profileIntro”导入ProfileIntroduction；
类应用程序扩展组件{
构造函数（）{
超级（）；
此。状态={
};
}
render（）{
const userportfoliionfo=data.map（项=>）
返回(
{userPortfolioInfo}
{/*社交媒体句柄*/}
);
}
导出默认配置文件简介

---

我最近开始使用react，我仍在学习，因此如果您能准确地解释一下我做错了什么，这将非常有用。

由于您正在使用

src

属性设置图像路径，您应该将

图像

文件夹从

src

移动到

public

，并更改I的相对路径

data.js

到绝对路径中的图像（从路径中删除起始的

）。这样，react server将能够在您运行应用程序时解析图像路径。此外，您不需要在源代码中导入图像。

我曾在线阅读过此方法，但问题是，我尚未实现此方法的后端。理想情况下，我将以json文件的形式从数据库中获取data.js文件。这就是为什么将公用的mages文件夹无法解决此问题，因为图像将存储在我的数据库中，而不是公用文件夹中。除使用

src

属性外，是否还有其他方法在子组件中渲染图像？