我正在使用React进行项目。这是我项目的文件结构
在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
这是 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="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,但我仍在学习,因此如果您能稍微深入地解释一下我在做错什么,那将对您有所帮助。
答案 0 :(得分:0)
由于您使用的是src
属性来设置图像路径,因此应将images
文件夹从src
移到public
,并在其中更改图像的相对路径。 data.js
到绝对路径(从路径中删除起始.
)。这样,当您运行应用程序时,react服务器将能够解析图像路径。另外,您无需在源代码中导入图像。