React Vite中如何直接展示API返回的含内部HTTP请求的SVG？

我从API获取了一个动态SVG，该SVG内部包含多个HTTP请求，无法通过<img src={svg} />标签展示。我使用React Vite及Vite的SVGR插件，将SVG数据存为本地ticket.svg文件时，可通过React组件正常展示，但我希望无需存为文件，直接在JSX中展示state中存储的ticketSvg。

当前可运行代码（本地SVG组件） #

import { ReactComponent as Ticket } from "./../../assets/ticket.svg";

const TicketDetail = () => {
      const [ticketSvg, setTicketSvg] = useState();
    
      const getTicketSVG = () => {
        // ...fetching SVG here
    
        setTicketSvg(svg); // looks something like <svg> ...svgData here..</svg>
      };
    
      return (
        <header className={styles.header}>
          // display svg here
          <Ticket />
        </header>
      );
    };

尝试过的无效方案 #

• 使用<img src={svg} />时出现404错误：

ERROR: GET http://localhost:5174/ticket-detail/.....[HTTP/1.1 404 Not Found 1ms]

• 使用数据URL方式仅能展示SVG框架，内部依赖API加载的二维码和logo无法显示：

<img src={`data:image/svg+xml;utf8,${encodeURIComponent(ticketSvg)}`} />

已查阅但未解决问题的资源 #

• Turning an SVG string into an image in a React component
• How to dynamically import SVG and render it inline
• Unable to import SVG with Vite as ReactComponent

内容的提问来源于stack exchange，提问作者Mexolini