Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/tfs/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
盖茨比降价-是否有可能在降价中保存svg_Svg_Graphql_Markdown_Gatsby - Fatal编程技术网

盖茨比降价-是否有可能在降价中保存svg

盖茨比降价-是否有可能在降价中保存svg,svg,graphql,markdown,gatsby,Svg,Graphql,Markdown,Gatsby,我对盖茨比很陌生。。。 我想在头版从降价内容中生成4个组件—4个块、每个图像(svg)、标题和文本。 有可能吗? 当我将svg图像导入为以下内容时,显示svg图像没有问题: import Svg from "../assets/svg/image.svg" 但当我尝试构建查询时,它不起作用: query { file(relativePath: { eq: "svg/marketing.svg" }) { ch

我对盖茨比很陌生。。。 我想在头版从降价内容中生成4个组件—4个块、每个图像(svg)、标题和文本。 有可能吗? 当我将svg图像导入为以下内容时,显示svg图像没有问题:

import Svg from "../assets/svg/image.svg"
但当我尝试构建查询时,它不起作用:

query {
        file(relativePath: { eq: "svg/marketing.svg" }) {
              childImageSharp {
                  fluid {
                      ...GatsbyImageSharpFluid
                  }
              }
        }
    }
此查询不返回结果,但如果是png文件,则可以。。。 我试图在frontmatter数据中传递svg的路径,并使用它来显示图像,但它不起作用

有什么想法吗


编辑:我现在明白了,您需要使用
publicURL
而不是
path

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

关键是获取svg图像的publicURL,并使用

也许不是最优雅的解决方案,但很有效

---
title: "Title content"
text: "Text content"
svg_name: "svg1"
---
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}

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