Displaying images within ReactJS Card - html

Question

I am working on a project which will feature a leaderboard with player icons, name and scores.
Here is my initial design that im trying to implement.
Im using cards to hold each element and will eventually will be inserting data from my DB, however rn I'm just trying to get the design skeleton together all smooth. I can get the text working and aligned fine but cant figure out how to it with text. Before I was just using the cards for text and the images as its own element, it worked fine til I tried to put more than one row.
Now when I'm trying to put the image in as a card, it's just printing info about the image instead of the actual image. I'm quite new to React so sorry if its a simple solution. I've been playing with this all day and cant find a solution that works for me.
Heres the code so far! Thanks so much for taking the time to read and any advice is greatly appreciated!
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import dogicon from './assets/doggo.png'
import './index.css';
export const Grid = styled.div`
`;
export const Row = styled.div`
display: flex;
background-color: #c3b0d3;
display: block ruby;
`;
export const Col = styled.div`
flex: ${(props) => props.size};
`;
const CardStyle = styled.div`
display: block ruby;
padding-left: 30px;
padding-right: 30px;
`;
console.log(dogicon);
const LeaderboardHeader = () => {
return (
<div className="leadheader">
<h2>LEADERBOARD</h2>
</div>
)
}
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <p>{this.props.icon}</p>
</div>
)
}
}
class App extends React.Component {
// fires before component is mounted
constructor(props) {
// makes this refer to this component
super(props);
// set local state
this.state = {
name: "PLAYER 1",
score: "200",
icon: require('./assets/doggo.png'),
};
}
render() {
const {name} = this.state;
const{score} = this.state;
const{icon} = this.state;
return (
<div className="container">
<LeaderboardHeader />
<Grid>
<Row>
<CardStyle>
<Col size={1}>
<Card icon={icon}/>
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card name ={name} />
<Card name ={name} />
<Card name ={name} />
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card score={score} />
<Card score={score} />
<Card score={score} />
</Col>
</CardStyle>
</Row>
</Grid>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.css
#import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');
body {
font: 50px;
font-family: 'Passion One', cursive;
margin: 20px;
background: #7E549F; overflow: hidden;
text-align: center;
}
.container{
width: 550px;
}
.leadheader {
margin-top: 100px;
background-color: #422D53;
color: #C3B0D3;
text-align: center;
width: 100%;
height: 50px;
font-size: 45px;
text-align: center;
border-radius: 5px 5px 0 0;
margin: 0;
padding-bottom: 25px;
}
.card {
background-color: #C3B0D3;
color: #2A1D34;
margin: 0 auto;
padding: 100px 0;
font-size: 40px;
}

Answer 1

You should use that image data in the src attribute of an <img> tag. Since you are using <p>{this.props.icon}</p> it is coerced to string, hence displaying the text value of the image.
So, this would be the final result:
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <img src={this.props.icon} />
</div>
)
}
}