5

I am querying an API to get an image as response. I would like to show the image when the state is updated. Another problem is that when I don't have the image, I always get printed the icon of image, and I don't want that. I tryied to solve this problem with this code, but I still can't manage to have the behaviour I want.

To be more clear, I want that, when the form is submitted, I get a response with an image. I update the state with setImage, and I want the image to be plotted on the page.

import React from 'react'
import {
    VStack,
    Button,
    Wrap,
    WrapItem,
    Center,
    Input,
    Image,
    Box
} from '@chakra-ui/react'

const axios = require('axios').default
const Endpoint = 'http://localhost:5000/'
const ImageContext = React.createContext(null)

function Predict() {
    const [image, setImage] = React.useState(null)
    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        const xmin = formData.get('xmin');
        const xmax = formData.get('xmax');
        const ymin = formData.get('ymin');
        const ymax = formData.get('ymax');
        formData.delete('xmin');
        formData.delete('xmax');
        formData.delete('ymin');
        formData.delete('ymax');
        axios.post(Endpoint + 'predict', formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    params: {
                        xmin,
                        ymin,
                        xmax,
                        ymax,
                    }
                }
        ).then(response => setImage(response.data))
    }
      return (
      <VStack>
      <form onSubmit={handleSubmit}>
          <Wrap spacing='30px'>
              <WrapItem>
                <Input placeholder='xmin' name="xmin"  />
              </WrapItem>
              <WrapItem>
                <Input placeholder='ymin' name="ymin" />
              </WrapItem>
              <WrapItem>
                <Input placeholder='xmax' name="xmax" />
              </WrapItem>
              <WrapItem>
                <Input placeholder='ymax' name="ymax" />
              </WrapItem>
          </Wrap>
          <br />
          <Input type='file' name="file"/>
          <Input type='submit' value='Submit'/>
      </form>

      <ImageContext.Provider value={{image}}>
      <Box boxSize='sm'>
        {image ? <Image src={image}/> : null }
      </Box>
      </ImageContext.Provider>
      </VStack>
      )
}

export default Predict

Thanks in advance!

EDIT I solved the problem with the default value of createContext and useState, setting them to null, but still the plot is cursed.

enter image description here

My response.data is something like that: enter image description here

I'm not pasting the chars because it seems they cannot be read here

juuso
  • 612
  • 7
  • 26

1 Answers1

1

Update

Chakra UI's Image component takes a url and not the Image data that you are passing. Refer to the question below for your case.

How to display binary data as image in React?

Old answer

I always get printed the icon of image, and I don't want that

Its because your condition

{image ? <Image src={image}/> : null }

is always true. image is a list and not a boolean.

You should use

{!!image.length ? <Image src={image}/> : null }
Imanpal Singh
  • 1,105
  • 1
  • 12
  • 22