如何渲染上载的图像（图像对象）而不出现错误

Question

我试图在React组件中设置一个图像加载器，以在加载后显示/渲染它（仅客户端，没有http请求）。图像作为对象加载，导致渲染错误：“对象作为React子代无效”import React, { Component } from "react";export default class extends Component {    state = {        selectedImage: null    }    onChange = (event) => {        this.setState({            selectedImage: event.target.files[0],        })    }    render() {        return (            <div>                <div>                    {this.state.selectedImage && this.state.selectedImage}                </div>                <form onSubmit={this.onFormSubmit}>                    <input type="file" name="someImage" accept="image/*" onChange={this.onChange} />                    <button>Add This Car</button>                </form>            </div>        )    }}预期结果-加载的图像在屏幕上显示/渲染。实际结果-错误：“对象作为React子对象无效” ...

Answer 1

上传的文件无法显示，您需要<img />带src属性的标记

src可以通过读取以下内容来生成属性的值event.target.files[0]

这样的事情应该做：

import React, { Component } from "react";

export default class extends Component {

    constructor(props) {

        super(props);

        this.state = {

            selectedImage: null.

            selectedImageContent: ""

        }

    }

    onChange = (event) => {

        const file = event.target.files[0];

        const fileReader = new FileReader();

        fileReader.onload = this.onFileLoad;

        this.setState({

            selectedImage: event.target.files[0]

        })

    };

    onFileLoad = (e) => {

        this.setState({

            selectedImageContent: e.target.result

        });

    }

    render() {

        const { selectedImageContent } = this.state;

        return (

            <div>

                <div>

                    {selectedImageContent && <img src={selectedImageContent} />}

                </div>

                <form onSubmit={this.onFormSubmit}>

                    <input type="file" name="someImage" accept="image/*" onChange={this.onChange} />

                    <button>Add This Car</button>

                </form>

            </div>

        )

    }

}

更多信息在这里