How to update the image when state is updated?-CodePudding

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.

My response.data is something like that:

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

CodePudding user response：

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 }