在ReactJS卡中显示图像

问题描述

我正在做一个项目，该项目将以排行榜的形式显示球员图标，姓名和得分。

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

解决方法

您应该在src标签的<img>属性中使用该图像数据。由于您使用的是<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>
    )
  }
}