показ изображения с помощью метода get в Reactionjs - PullRequest
Новая
       22

показ изображения с помощью метода get в Reactionjs

0 голосов
/ 25 сентября 2019

Я хочу отобразить несколько изображений методом get с использованием flask и responsejs из таблицы изображений. Я загрузил изображение с помощью метода post. Но я не уверен, как отобразить его с помощью метода get.Это таблица изображений: 

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

Это метод записи, который я написал для сохранения изображения: 

  @furnitureImageController.route('/save', methods=['POST'])
def furnitureImageInfo():
    try:
        uploaded_files = request.files.getlist("fileToUpload[]")
        print(uploaded_files)
        print('imageId', request.form.get('imageId'))

        for file in uploaded_files:
            if file.filename == '':
                print('No selected file')
                return 'No selected file'
            if file and allowed_file(file.filename):
                filename = str(uuid.uuid4())+'.png'
                furnitureImageDirectoryPath= os.path.join('furnitureImageDirectory/'+filename)
                print('filename', filename)
                print('imageDirectoryPath', furnitureImageDirectoryPath)

                file.save(os.path.join(current_app.config['fileUploadPath'], furnitureImageDirectoryPath))
                furnitureImage = FurnitureImage(
                    imagePath=furnitureImageDirectoryPath
                )
                db.session.add(furnitureImage)
                db.session.commit()

        return Response(json.dumps({'status': 'success', 'message': 'successfully uploaded'}),
                        status=200,  mimetype='image/png')
    except Exception as e:
        print('exception is :: ', e)
        return Response(json.dumps({'status': 'failed', 'message': 'upload failed'}),
                        status=200,  mimetype='image/png')

Это метод get: 

@furnitureImageController.route('/getfurnitureImage', methods=['GET'])
def getfurnitureImage():
    try:
        print('getAll controller feedbackList')
        imageList = FurnitureImage.query.all()
        print("imageList ", imageList)

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

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

Теперь я хочу отобразить все изображения вactjs. Но он показывает только тег изображения, и я также могу видеть идентификатор изображения из консоли: 

 this.state = {
            apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
            imageList:[]

        };

    }

    componentDidMount() {
        this.getImagePath();
    }

    getImagePath = () => {
        axios.get( this.state.apiUrl+'/api/v1/furnitureImage/getfurnitureImage', {},)
            .then((response) => {
                console.log("response",response.data.data);
                this.setState({ imageList: response.data.data  });
            }).catch((error)=>{  console.log("error",error); this.setState({ imageList: []  });   });
    };

    render() {


        return (

            <div>

                <div style={{width:"450px", margin:"80px auto", paddingTop:"40px",
                    marginRight:"470px", backgroundColor:"#fff", borderRadius:"10px"}}>

                    {
                        this.state.imageList.map((image, key)=>(
                            <div key={key}><img src={ image.imagePath}/></div>
                                                   ))
                    }

                </div>

            </div>
        )

    }

Но я не могу отобразить изображение. Как я могу это сделать

...