Question

我正在尝试使用flask和来自图像表的reactjs通过get方法显示图像。我已经成功使用post方法上传了图像，但是我不确定如何使用get方法显示图像。这是图像表：

CREATE TABLE sales_lead_image_path(
id VARCHAR(255) PRIMARY KEY,
image_path VARCHAR(255),
);

这是我在后端编写的get方法，它可以正常工作。

@visitImageController.route('/getVisitImage', methods=['GET'])
def getvisitImage():
    try:
        print('getAll controller feedbackList')
        imageList = VisitImage.query.all()
        print("imageList ", imageList)

        resultList = visitImageDtoList.dump(imageList).data
        print('resultList', resultList)

        return Response(json.dumps({'status': 'success', 'message': 'data Found', 'data': resultList}), status=200, mimetype='application/json')
    except Exception as e:
        print(e)
        return Response(json.dumps({'status': 'failed', 'message': 'No data Found.', 'data': e}), status=200,
                        mimetype='application/json')

但是我没有得到如何使用我写的restapi在前端显示它。这是我到目前为止所做的：

componentDidMount() {
    console.log('componentDidMount calling ...');

    axios.get( this.state.apiUrl+'/api/v1/visitImage/getVisitImage',

        {params: {id:  this.props.visitParamId}}, {})
        .then((response) => {
            console.log('geall colling ...');
            console.log("response",response.data.data);
            const responseData  = response.data.data;
            this.setState({


            });
        }).catch((error)=>{
        console.log("error",error);
        //this.setState({ });
    });
}

及其渲染功能：“

render () {


    return(
        <div>
            <Navbar/>
            <CustomNotifier />

            <div className="contentDiv">
                <div className="formDiv">
                    <h1>Visit Description</h1>

                    <Form>

                        <div>
                            <label required htmlFor="file" style={{ left:'33%',position:'absolute',
                                marginTop: '17px',fontSize:'18px', color:'rgba(0, 0, 0, 0.54)' }} >Upload Image:</label>
                            <input  id="files" type="file" style={{marginTop: '17px', marginLeft:"122px", border:'0px'}}/>
                        </div>



                        <div style={{textAlign:'center', marginTop:'35px', marginBottom:'22px'}} className={card.disable}>
                            <button  type="button"
                                     fullwidth="true" variant="contained"
                                     onClick={() => this.saveVisitImage()} style={{padding: '9px 0px'}}>Submit</button>
                        </div>
                    </Form>
                </div>
            </div>

Answer 1

嗯，您快到了。只需将状态设置为您的图像列表即可：

this.setState({
  images: response.data.data
});

，然后在您的render函数中执行以下操作：

{this.state.images.map(image =>
  <img src={image}/>
)}

如何通过reactjs中的get方法显示图像？

1 个答案: