盖茨比降价-是否有可能在降价中保存svg
我对盖茨比很陌生。。。 我想在头版从降价内容中生成4个组件—4个块、每个图像(svg)、标题和文本。 有可能吗? 当我将svg图像导入为以下内容时,显示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
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" />