前端JS-base64转图片

2024-12-06 约 194 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=127848171

前端JS base64转图片

关键词由CSDN通过智能技术生成

这个需求看上去很唬人是吧，其实很简单，只需要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>

目录

前端JS-base64转图片

前端JS base64转图片