无法加载React App中父组件作为道具传递给子组件的图像

如何解决无法加载React App中父组件作为道具传递给子组件的图像

我正在使用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: "[e-mail]",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

这是 App.js

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;

现在您可以看到，data.js包含指向2个不同图像的路径，即coverImage和displayPicture。但是，当我在子组件profileIntro.js中访问我的道具时，除了这两张无法渲染的图片之外，其他所有东西都可以正常工作。 我在线阅读了我需要导入我的react App中使用的图像的信息，但是我不确定如果将图像作为道具传递给子组件该怎么做。我希望将要显示的图像从数据库中返回给我，这就是为什么我以这种方式实现它而不是简单地导入它。

这是我的 profileIntro.js

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="[e-mail]"> {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，但我仍在学习，因此如果您能稍微深入地解释一下我在做错什么，那将对您有所帮助。

解决方法

由于您使用的是src属性来设置图像路径，因此应将images文件夹从src移到public，并在其中更改图像的相对路径。 data.js到绝对路径（从路径中删除起始.）。这样，当您运行应用程序时，react服务器将能够解析图像路径。另外，您无需在源代码中导入图像。