exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
const { createNode } = actions
// Data can come from anywhere, but for now create it manually
const framingContent = JSON.stringify(framing)
framing.forEach((h, index) => {
const nodeMeta = {
id: createNodeId(index),
parent: null,
children: [],
internal: {
type: `framing`,
// mediaType: `text/html`,
content: framingContent,
contentDigest: createContentDigest(h),
},
}
const { name, ext } = path.parse(h.imageId)
const absolutePath = path.resolve(__dirname, "./src/images/framing/", h.imageId)
console.log(absolutePath)
// 2. Build a data shape that corresponds to a File node that Sharp can process
const data = {
name,
ext,
absolutePath, // <-- required
extension: ext.substring(1), // <-- required, remove the dot in `ext`
}
// 3. Build the image node using our data
const imageNode = {
...data,
id: createNodeId(`farming-image-${index}`),
internal: {
type: 'Image',
contentDigest: createContentDigest(data),
},
}
// 4. Create the node. When imageNode is created,
// Sharp adds childImageSharp to the node
createNode(imageNode)
const node = Object.assign(h, nodeMeta)
node.src = imageNode
console.log(node, "-----------------framing Node")
createNode(node)
})
}
这是我的gatsby-node.js文件。我从js文件中获取帧数据,然后添加图像节点。框架数据如下所示。
let framing = [
{
id: 1,
title: "Wedding Frame 1",
price: 500,
imageId: "1.jpg",
color: [],
},
{
id: 2,
title: "Wedding sda Frame 2",
price: 500,
imageId: "2.jpg",
color: [],
},
{
id: 3,
title: "Wedding sda Frame 2",
price: 500,
imageId: "3.jpg",
color: [],
},
{
id: 4,
title: "Wedding sda Frame 2",
price: 500,
imageId: "1.jpg",
color: [],
},
]
module.exports = {framing}
但是我无法使用包含childImageSharp的图像查询成帧数据。
const data = useStaticQuery(graphql`
query {
allFraming {
edges {
node {
id
src {
childImageSharp {
fluid(quality: 100, maxWidth: 1000) {
base64
aspectRatio
src
srcSet
sizes
}
}
}
price
imageId
}
}
}
}
`)