how to display a image by get method in reactjs?

Question

I am trying to display a image by get method using flask and reactjs from a image table.I have successfully uploaded the image using post method.But I am not sure how to display it using get method. This is the image table:

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

This is the get method i wrote in the backend and its working fine.

@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')

But i am not getting how to show it in the frontend by using the restapi i wrote.This is what i have done so far:

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({ });
    });
}

and its the render function:"

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

Well you're almost there. Just set the state to your list of images:

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

and then in your render function just do something like this:

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