在React中动态渲染base64编码的SVG

Question

我收到来自API的base64编码的SVG，有什么方法可以在react应用程序中渲染解码的SVG吗？

import React from 'react';
import { useSelector } from 'react-redux';
const userLogo = () => {
  const logoSVG = useSelector((store) => store.portfolio.logo))
  const [logo, setLogo] = React.useState('');
 
  React.useEffect(() => {
   if(logoSVG)
     setLogo(atob(logoSVG))
  }, [logoSVG])

  return(
    <> { logo }</>
 )
}

然而，在运行上面的代码时，我得到的SVG是字符串输出，而不是渲染值，dangerouslysetinnerhtml prop只渲染html格式，而不渲染SVG

Answer 1

可以将文本转换为blob，并将blob用作图像元素源

const blob = new Blob([logo], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);

return <img src={url} />