react开发笔记(一)：渲染验证码图片报错data:image/svg+xml；base64,undefined net::ERR_INVALID_URL

最新推荐文章于 2024-07-07 21:27:28 发布

你看我像是会的样子吗？

最新推荐文章于 2024-07-07 21:27:28 发布

阅读量1.7k

点赞数

分类专栏： react 文章标签： react.js xml javascript

本文链接：https://blog.csdn.net/summer_gf/article/details/127934992

版权

react 专栏收录该内容

1 篇文章

订阅专栏

刚进入页面的时候img的src会报错data:image/svg+xml;base64,undefined net::ERR_INVALID_URL，解决办法就是在请求返回的时候拼接好src再赋值到img。

const FormMain = memo(() => {

  const [authCode, setAuthCode] = React.useState<any>();
  useEffect(() => {
    axios({
      method: 'get',
      url: `${proBaseURL_2}json/verifyCode`,
    }).then((res) => {
      setAuthCode('data:image/svg+xml;base64,' + res?.data.code)
    }).catch((e) => {

    });

  }, []);
  const view = React.useMemo(() => {
    return (
         	   <img
                key={'img'}
                style={{ marginTop: '-30px', width: '240px', height: '88px' }}
                onClick={() =>
                  axios({
                    method: 'get',
                    url: `${proBaseURL_2}json/verifyCode`,
                  }).then((res) => {
                    setAuthCode('data:image/svg+xml;base64,' + res?.data.code)
                  }).catch((e) => {
                })
                }
                src={authCode}
                alt=""
              />
           
    )

  }, [authCode])
  return view;

});