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

问题描述

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",imageId: "2.jpg",{
    id: 3,imageId: "3.jpg",{
    id: 4,]
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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）