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

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 .
鉴于这种结构:

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