在开发中使用 Gatsby 时，图像的变化经常不会反映在页面上

Question

我一直在 Gatsby 中遇到这种奇怪的图像行为。很多时候，当我将图像从一个文件更改为另一个文件时（通常是通过重命名我拥有的本地文件），但图像的更改并没有反映在页面上。我正在开发中，所以 我还没有在 http://localhost:8000 以外的任何地方托管过 gatsby develop。 我认为这是因为缓存，但在我清除了浏览器缓存问题仍然存在，即图像没有得到更新。但不知何故它会在几个小时后消失，这意味着页面上的图像将按预期更新。

相关的代码片段是，

我在某个地方有一个 index.md，它有这个条目 avatar: './me.jpg'，在同一个文件夹下我有一个名为 me.jpg 的图像文件。以及页面"reads"图片是如何通过graphql查询的。

   export const pageQuery = graphql`
  {
    hero: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
      edges {
        node {
          frontmatter {
            title
            name
            subtitle
            contactText
            avatar {
              childImageSharp {
                fluid(maxWidth: 6000, quality: 100) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
          html
        }
      }
    }

当我要换图片的时候，我会复制一个新的图片文件到文件夹里，然后重命名为me.jpg（当然是在我把原来的me.jpg重命名之后）。然后我回到我希望图像得到更新的页面。但奇怪的是，页面上的图像经常不会更新，而是保持原样。

我还尝试关闭本地服务器并通过 gatsby develop 重新启动它，但是它没有解决问题

Answer 1

原因是当您启动 gatsby develop 时，您的 GraphQL 查询运行一次。图像中的更改未反映出来，因为在开发仍在运行ning 时查询不会刷新。

另一个原因是您的捆绑器很可能会比较文件名并发现它是相同的文件名。再次启动 gatsby develop 时不会重新加载文件。即使在重新启动后，旧文件仍在您的 .chache 或 public 文件夹中。您必须运行 gatsby clean 再运行宁 gatsby develop 之前。

在开发中使用 Gatsby 时，图像的变化经常不会反映在页面上

The change of image often doesn't get reflected on the page when using Gatsby in development

frontend

reactjs

graphql

gatsby