在 ReactJS Card 中显示图像

Question

我正在开展一个项目，该项目将提供一个带有玩家图标、名称和分数的排行榜。

Here is my initial design that im trying to implement.

我正在使用卡片来保存每个元素，最终会从我的数据库中插入数据，但是我只是想让设计框架顺利地组合在一起。我可以使文本正常工作并对齐，但无法弄清楚如何使用文本。在我只是使用卡片作为文本和图像作为自己的元素之前，it worked fine 直到我 tried to put more than one row。

现在，当我尝试将图像作为卡片放入时，它只是 printing info about the image instead of the actual image. 我对 React 很陌生，如果它是一个简单的解决方案，我很抱歉。我整天都在玩这个，找不到适合我的解决方案。

这是到目前为止的代码！非常感谢您花时间阅读，非常感谢任何建议！

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

您应该在<img> 标记的src 属性中使用该图像数据。由于您使用的是<p>{this.props.icon}</p>，它被强制转换为字符串，因此显示图像的文本值。

所以，这将是最终结果：

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>
    )
  }
}