image - svg 的路径不适用于 Gatsby 中的 img 标签

Question

我正在尝试使用可以作为 Prop 传递的 svg 图像(我将使用一组 svg 图像)。我正在使用 gatsby-plugin-react-svg，它允许我导入 svg 并将其用作组件。这可行，但我无法将 svg 图像作为 Prop 传递或以这种方式在数组中引用它们。在寻找解决方案时，我看到了许多导入 svg 然后将其用作 img 标记中的 src 的建议。这对我来说非常有效，但当我尝试时却不起作用。我需要不同的插件才能以这种方式使用 svg 图像吗？

这有效(这也意味着我的路径是正确的):

import CurrentSelected from "../assets/markers/current_selected.svg"

<Layout>
  <CurrentSelected />
</Layout>

这些不起作用(但这是我需要使用的):

import CurrentSelected from "../assets/markers/current_selected.svg"

<Layout>
  <img src={CurrentSelected} />
</Layout>

或者

<Layout>
  <img src={require("../assets/markers/current_selected.svg")} />
</Layout>

在寻找解决方案时，我看到了建议的解决方案，但它在我的项目中不起作用。谁能帮助我以这种方式(或任何其他不使用 svg 作为组件的方式)渲染图像？

Answer 1

我不久前解决了这个问题，我只是想跟进我自己的问题，以防其他人也遇到同样的问题。

问题是 gatsby-plugin-react-svg 将 SVG 文件转换为 React 组件，因此路径返回 React 组件，而不是 SVG 文件。为了解决这个问题，我必须删除 gatsby-plugin-react-svg，之后它就可以正常工作了。