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

Question

我从 API 接收 base64 编码的 SVG，是否有任何方法可以在反应应用程序中呈现解码的 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 作为字符串输出而不是呈现值，危险的 setinnerhtml 道具只呈现 html 格式而不是 SVG

标签： reactjs

Answer 1

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

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

return <img src={url} />