如何在 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需要将图像加载为 File 节点。但gatsby-transformer-sharp只检查节点是否具有“扩展名”字段，并且——如果它是有效的文件类型之一——处理它。我们可以通过给它字段extension&来“欺骗”它认为我们的节点是一个 File 节点absolutePath。

鉴于这种结构：

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

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

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

稍后，您可以查询图像：

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

Answer 2

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

\n

当与 结合使用时gatsby-source-filesystem，这允许您查询 json 对象。

\n

因此，假设您已遵循 的设置，gatsby-image如果您具有以下结构

\n

src/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 images/\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80bar.png\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 content/\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80foo.json\n

\n

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

\n

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

\n

然后你可以像这样查询它们

\n

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

\n

注意它们必须是相对链接。

\n