如何使用reactjs在列表中显示图像？

我是新手，我可以在“添加联系人”组件中添加图像，但无法在联系人列表中显示。我可以通过Imageview组件添加图像，但无法保存图像，也无法在联系人列表中查看图像

AddContact组件：

图像组件：

联系人列表组件：

---

有人能帮我吗？提前感谢…

将您的图片发布到code@VahidAkhtar-我已经在上面发布了。我的意思是，如上所述，有3个组件代码可用。

import React, { Component } from "react";
import { Button, Modal, Image, Form, Segment } from "semantic-ui-react";
import ImageView from "./Image"
import { connect } from "react-redux";
import "./AddContact.css"
import { addContact } from "../../redux/contactActions";


class AddContact extends Component {
  state = {
    open: false,
    contact: {
      firstname: "",
      lastname: "",
      email: "",
      phone: "",
    }
  };

  show = () => this.setState({ open: true });
  close = () => this.setState({ open: false });

  changeHandler = ({ target }) => {
    const name = target.name;
    const value = target.value;
    var state = this.state;
    state.contact[name] = value;
    this.setState(state);
  };

  addInfo = event => {
    event.preventDefault();
    const { dispatch } = this.props;
    const { contact } = this.state;

    if (
      contact.firstname === "" ||
      contact.lastname === "" ||
      contact.email === "" ||
      contact.phone === ""
    ) {
      alert("Both fields are required.");
      return;
    }

    dispatch(addContact(contact));
    this.close();
  };



  render() {
    const { open, contact } = this.state;
    return (
      <div>
        <Button circular icon="add" color="blue" onClick={this.show} className = "myForm"/>
        <Modal dimmer={true} open={open} onClose={this.close}>
          <Modal.Header>Select a Photo</Modal.Header>
          <Modal.Content image>
            <ImageView/>
            {/* <Image
              wrapped
              size="small"
              src="https://react.semantic-ui.com/images/avatar/large/rachel.png"
              onClick = {this.onImageChange}
            />
            <input type="file" name="myImage" onChange={this.onImageChange} /> */}
            <Segment className="myView">
              <Form>
                <Form.Field inline widths="equal">
                  <label>First name</label>
                  <Form.Input
                    fluid
                    type="text"
                    className="txtBox"
                    name="firstname"
                    value={contact.firstname}
                    onChange={this.changeHandler}
                  />
                  <label>Last name</label>
                  <Form.Input
                    fluid
                    type="text"
                    className="txtBox"
                    name="lastname"
                    value={contact.lastname}
                    onChange={this.changeHandler}
                  />
                  <Form.Input
                    fluid
                    label="Phone Number"
                    type="number"
                    className="txtBox"
                    name="phone"
                    value={contact.phone}
                    onChange={this.changeHandler}
                  />
                  <Form.Input
                    fluid
                    label="Email"
                    type="email"
                    className="txtBox"
                    name="email"
                    value={contact.email}
                    onChange={this.changeHandler}
                  />
                </Form.Field>
              </Form>
            </Segment>
          </Modal.Content>
          <Modal.Actions>
            <Button color="black" onClick={this.close}>
              Cancel
            </Button>
            <Button
              positive
              icon="checkmark"
              labelPosition="right"
              content="Save"
              onClick={this.addInfo}
            />
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}


const mapStateToProps = (state, ownProps) => ({
  contacts: state.contacts
});

export default connect(mapStateToProps)(AddContact);

import React, { Component } from "react";
import {Image} from "semantic-ui-react"
class ImageView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: null
    };

    this.onImageChange = this.onImageChange.bind(this);
  }

  onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0];
      this.setState({
        image: URL.createObjectURL(img)
      });
    }
  };

  render() {
    return (
      <div>
        <Image
              wrapped
              size="small"
              src={this.state.image}
              onClick = {this.onImageChange}
            />
            <input type="file" name="myImage" onChange={this.onImageChange} />

      </div>
    );
  }
}
export default ImageView;

import React from "react";
import { Icon, Button, Image, Container, List } from "semantic-ui-react";
import "./Contact.css";
import PropTypes from "prop-types";


function Contact({ contact}) {
  return (
    <Container>
    <List >
      <List.Item className="myshow">
        <Image avatar src="/images/avatar/small/rachel.png" />
        <List.Content>
          <List.Header as="a">
            {contact.firstname} {contact.lastname}
          </List.Header>
          <List.Description className="myElement1">
            <a>
              <Icon name="mail outline" />
              <b>{contact.email}</b>
            </a>
            <p>
              <Icon name="phone" />
              {contact.phone}
            </p>
            <Button
              className="myButton"
              circular
              icon="trash alternate"
            />
          </List.Description>
        </List.Content>
      </List.Item>
    </List>
    <hr/>
  </Container>
  );
}

export default Contact;