Gatsby markdown - 是否有可能以某种方式在 markdown 中保存 svg

Question

我对盖茨比还很陌生…… 我想从降价内容在首页上生成 4 个组件 - 4 个块，每个图像 (svg)、标题、文本。有可能吗？导入svg图片显示没有问题为：

import Svg from "../assets/svg/image.svg"

但是当我尝试构建查询时它不起作用:

query {
        file(relativePath: { eq: "svg/marketing.svg" }) {
              childImageSharp {
                  fluid {
                      ...GatsbyImageSharpFluid
                  }
              }
        }
    }

这个查询 returns 没有结果，但是如果是 png 文件就可以了... 我试图将路径传递给 frontmatter 数据中的 svg 并用它来显示图像，但它不起作用..

有什么想法吗？

编辑：我现在明白您需要使用 publicURL 而不是 path。

Answer 1

我设法自己找到了解决方案...

关键是获取 svg 图片的 publicURL 并使用 <img> 标签渲染它

每个markdown文档：

---
title: "Title content"
text: "Text content"
svg_name: "svg1"
---

将 svg1.svg 图像放入资产文件夹。

我不得不从 markdown 查询 frontmatter 和 svg 文件：

query Services {
            allFile(filter: {extension: {eq: "svg"}}) {
                nodes {
                    publicURL
                    name
                }
            }
            allMarkdownRemark(sort: {fields: frontmatter___order}) {
                nodes {
                    frontmatter {
                        text
                        title
                        svg_name
                        order
                    }
                }
            }
        }

然后构造一个对象：

const {allMarkdownRemark, allFile} = data
const documents = allMarkdownRemark.nodes
const pictures = allFile.nodes

let services = documents.map(doc => {
        let pic = pictures.find(p => p.name === doc.frontmatter.svg_name)
        return doc = {...doc.frontmatter, ...pic}

    })

然后映射 services 并显示带有 img 标签的 svg:

<h2>{title}</h2>
<p>{text}</p>
<img src={publicURL} alt="Alt text" />

也许不是最优雅的解决方案，但有效。

Gatsby markdown - 是否有可能以某种方式在 markdown 中保存 svg

Gatsby markdown - is it posible to save somehow svg in markdown

markdown

svg

graphql

gatsby