Javascript 如何用盖茨比图像显示新添加的图像文件？

在我的盖茨比应用程序中，用户可以上传一个图像，该图像保存在本地并理想显示，但

Gatsby image

看不到新图像这就是我的

image.js

文件的外观

我认为graphql数据需要以某种方式刷新，因为如果我执行

console.log（data.images）

操作，新映像甚至不会显示，但是我该如何做呢

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 1200) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      console.log(data.images)
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename)
      })
      if (!image) {
        return null
      }
      return (
        <Img
          alt={props.alt}
          fluid={image.node.childImageSharp.fluid}
          style={props.customStyle}
        />
      )
    }}
  />
)

export default Image

我试着使用

gatsby插件节点重载

，但似乎不起作用。下面是我的

gatsby config.js

插件

plugins: [
    `gatsby-plugin-material-ui`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `../images`),
      },
    },
    "gatsby-plugin-node-reload",
  ],

---

此外，如果我在保存新图像后重新启动应用程序，一切都会正常运行。当然，您需要刷新/重建应用程序，以使用您的图像更新系统。Gatsby在构建/开发时编译、捆绑和处理所有资产，因此如果添加新映像，则需要重新构建应用程序，以允许Gatsby为该映像创建架构和节点

根据您的场景，您有几个选择：

• 使用本机

  img

  标记，并使用其他第三方依赖项（，等）重新创建

  gatsby图像的好处
  
  

• 创建用于在上载图像时触发重建的。webhook是应用程序在新事件实时发生时通知另一个应用程序的一种方式。我不推荐这种方法，因为它会在部署应用程序时导致应用程序崩溃

• 使用其他SSR框架，而不是盖茨比

plugins: [
    `gatsby-plugin-material-ui`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `../images`),
      },
    },
    "gatsby-plugin-node-reload",
  ],