从json文件加载图像作为gatsby.js中的图像节点时,无法使用childImagesharp

时间:2020-09-04 13:50:19

标签: reactjs gatsby gatsby-image

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
          }
        }
      }
    }
  `)

如何从gatsby-node.js中的本地图像路径查询childImageSharp
childImageSharp deoesnot show up in the gatsby query

0 个答案:

没有答案