Question

我的目标是在头像中显示图像，如果我可以在头像图标上选择一个图像文件，则它应该在头像中显示图像。但是我做不到。

有人可以帮我在头像中显示图片吗？

Answer 1

您应该喜欢：

onImageChange = event => {
let file = URL.createObjectURL(event.target.files[0]);

console.log("File", file);

if (file === undefined) {
  console.log("File removed");
} else {
  this.setState({
    image: file
  });
}

};

并渲染

<Avatar src={this.state.image || '/static/images/avatar/1.jpg'} width="250" height="250" />

别忘了取消卸载

componentWillUnmount() {
   URL.revokeObjectURL(this.state.image);
}

Answer 2

请使用保存到状态的图像。如下

<Avatar src={this.state.image} width="250" height="250" />

在构造函数中，使用默认值加载它。

constructor(props) {
    super(props);
    this.state = {
        'image': '/static/images/avatar/1.jpg'
    };
  }

图片更改事件应该是

onImageChange = event => {
    let file = URL.createObjectURL(event.target.files[0]);
    console.log("File", file);

    if (file == undefined) {
      console.log("File removed");
    } else {
      this.setState({
        image: file
      });
    }
};

无法使用reactjs在头像中更改图像

2 个答案: