这个需求看上去很唬人是吧,其实很简单,只需要img标签就可以了

接口出参见下图

因为我这边的 base64二进制文件流缺失前缀需要在js/ts 简单处理下拼接图片类型data:image/png;base64

// resct hooks ts
const [imgBase64, setImgBase64] = useState<any>();
const onGetCaptcha = () => {
    const params = {
      captchaId: generateUUID(),
    };
    GetCaptcha(params).then((res) => {
      if (res.success) {
        setImgBase64(`data:image/png;base64,${res?.data}`);
      }
    });
  };

处理好后

直接在img中使用就可以

<span style={{ marginLeft: '5px' }}>
  <img
    style={{ width: '99px', height: '35px' }}
    src={imgBase64}
    alt=""
  />
</span>

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐