Question

我有一个案例研究页面，显示带有背景图像和SVG徽标的项目网格。这些来自WordPress CPT，并使用GraphQL显示在我的Gatsby网站中。

我需要以内联方式而不是<img>标记形式编写SVG，因此我假设我需要将其导入文件顶部，但是我找不到为此的有效解决方案。我的尝试是：

data.allWordpressWpProject.edges.map((svg, i) => {
    import Logo{i} from svg.node.acf.prj_logo.url.localFile.publicURL
})

我认为这是一个很普遍的问题，但是我似乎在任何地方都找不到解决方案。有人可以帮忙吗？

Answer 1

仅在寻求解决方案的过程中尽可能迈出一步：我继续从 publicURL 中获取了 SVG 文件：

let SvgObject = await fetch(svg.localFile.publicURL)
  .then(response => response.text())

let stringToHTML = function(str) {
  let parser = new DOMParser();
  let svgTest = parser.parseFromString(str, 'text/html');
  return svgTest.body;
}

const SvgDOMElement = stringToHTML(SvgObject)

我的困难在于，我无法将 DOM 元素实现到组件中。

从React（Gatsby）中的GraphQL查询导入SVG

1 个答案: