如何从Sanity渲染上传的内联SVG？图片与文件字段均无效

• 通过Sanity Asset API获取原始SVG内容
  不管是图片还是文件字段，上传后的SVG都会生成对应的asset文档，其中包含url属性。你可以基于这个URL发起请求获取SVG原始代码。注意处理跨域问题，建议在服务器端（比如结合GROQ查询的后端函数）完成请求，避免前端CORS限制。

• 自定义Schema字段直接存储SVG代码
  在Sanity Schema里新增text或textarea类型字段，让用户直接粘贴SVG代码。这种方式无需额外请求，渲染时直接输出字段内容即可。如果想优化操作流程，还可以开发自定义输入组件，让用户上传SVG文件后自动解析并填充代码到字段中。

• 框架集成时在服务端处理SVG内容
  若用Next.js等框架和Sanity集成，可在服务端（比如getStaticProps/getServerSideProps）通过GROQ查询拿到asset的URL，再用fetch获取SVG文本内容，传递给前端渲染。以React为例：

  export async function getStaticProps() {
    const svgAsset = await sanityClient.fetch(`*[_type == "yourDocType"][0].svgField`);
    const svgContent = await fetch(svgAsset.url).then(res => res.text());
    return { props: { svgContent } };
  }
  

  前端通过dangerouslySetInnerHTML={{ __html: svgContent }}直接渲染内联SVG。

• 配置自定义Asset Pipeline
  借助Sanity的asset pipeline机制，在SVG上传时自动提取原始代码并存储到asset文档的自定义字段中。可以通过自定义插件或钩子实现，后续查询时直接从asset中读取代码，无需额外请求。

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