Question

我有一个json文件和一个包含图片的文件夹

plugins/
└── gatsby-source-cars/
    ├── images/
    ├── cars.json
    └── gatsby-node.js

文件cars.json包含一个数组，每个索引都是一个对象，该对象包含具有图像相对路径的键

我想将图像文件加载到sourceNodes上，而只是将路径与gatsby-image插件一起使用

Answer 1

我假设您要使用gatsby-image来处理本地图像，因为这意味着您已经安装了gatsby-plugin-sharp和gatsby-transformer-sharp。

通常需要gatsby-source-filesystem才能将图像作为文件节点加载。但是gatsby-transformer-sharp仅检查节点是否具有“扩展名”字段，并且-如果它是有效文件类型之一，则对其进行处理。我们可以通过给字段extension和absolutePath来欺骗它，使我们认为节点是File节点。

给出以下结构：

plugins/
└── gatsby-source-my-plugin/
    ├── images/
    |     └──image01.png
    ├── images.json  //  [{ "01": "./images/image01.png" }]
    └── gatsby-node.js

gatsby-node.js可能看起来像这样：

const path = require('path')
const fs = require('fs-extra')

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
  const { createNode } = actions

  const imageList = await fs.readJson(path.resolve(__dirname, './images.json'))
  imageList.forEach(img => {

    const [ id, imgPath ] = Object.entries(img)[0]
    const { name, ext } = path.parse(imgPath) // get file name & extension
    const absolutePath = path.resolve(__dirname, imgPath)
    const data = {
      name,
      ext,
      absolutePath,                  // <-- required
      extension: ext.substring(1),   // <-- required, remove the dot in `ext`
    }
    const imageNode = {
      ...data,
      id: createNodeId(`my-plugin-image-${id}`),
      children: [],
      internal: {
        type: 'MyPluginNode',
        contentDigest: createContentDigest(data)
      }
    }

    createNode(imageNode)
  })
}

稍后，您可以查询图像：

{
  allMyPluginNode {
    nodes {
      childImageSharp {
        fixed(width:200) {
          src
        }
      }
    }
  }
}

Answer 2

一种使用gatsby-image将json中的图像文件路径转换为图像而不直接进入gatsby-node.js的方法是使用插件gatsby-transformer-json。

与gatsby-source-filesystem结合使用时，可以查询json对象。

因此，假设您具有以下结构，则假设您遵循gatsby-image的{{3}}

src/
└── images/
    └──bar.png
└── content/
    └──foo.json

并且foo.json包含指向图像位置的相对链接，例如

[
  {
    "name": "foo",
    "src": "../images/bar.png"
  }
]

然后您可以像查询它们

query MyQuery {
  allFooJson {
    edges {
      node {
        name
        imgSrc {
          childImageSharp {
            fluid(maxHeight: 64, maxWidth: 64) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

请注意，他们setup。

如何在gatsby源插件上加载本地图像？

2 个答案: