React中状态更新时如何刷新显示图片且无图时不显示占位图标

问题原因及修复方案 #

你遇到的图片渲染异常核心是base64格式图片没有补全Data URL协议前缀导致的，同时可以按以下步骤优化代码：

1. 核心修复：补全图片src前缀 #

你的接口返回的是图片的base64编码内容，直接传给src无法被浏览器识别为图片，需要拼接对应的Data URL前缀，根据你的图片实际格式（png/jpeg/webp等）调整即可。如果接口返回的是二进制流，需要额外配置axios的响应类型。

2. 完整修改后的代码示例 #

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

const axios = require('axios').default
const Endpoint = 'http://localhost:5000/'
// 如果你不需要跨组件传递图片状态，这个Context可以直接删除，当前组件内直接用state即可
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,
                    },
                    // 如果接口返回的是二进制流则开启这行配置，返回base64字符串可忽略
                    // responseType: 'blob'
                }
        ).then(response => {
            // 情况1：接口返回base64字符串，补全前缀，根据你的图片格式替换png为jpeg等
            setImage(`data:image/png;base64,${response.data}`)
            // 情况2：接口返回二进制流，用这个方法生成临时链接
            // const imgUrl = URL.createObjectURL(response.data)
            // setImage(imgUrl)
        })
    }

    // 可选：组件卸载时释放blob临时链接的内存，仅用base64可忽略
    React.useEffect(() => {
        return () => {
            if(image?.startsWith('blob:')) URL.revokeObjectURL(image)
        }
    }, [image])

      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} fallback={null}/> : null }
      </Box>
      </ImageContext.Provider>
      </VStack>
      )
}

export default Predict

3. 排查验证步骤 #

• 先打印response.data确认返回内容，如果接口返回的base64已经自带data:image/xxx;base64,前缀，不需要重复拼接直接赋值即可。
• 把拼接好的完整图片链接复制到浏览器地址栏访问，确认可以正常显示，排除接口返回数据错误的问题。
• 给Chakra UI的Image组件添加fallback={null}属性，可以进一步避免加载异常时出现占位图标。

内容的提问来源于stack exchange，提问作者juuso