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

【问题标题】：The change of image often doesn't get reflected on the page when using Gatsby in development在开发中使用 Gatsby 时，图像的变化通常不会反映在页面上
【发布时间】：2019-12-21 09:50:39
【问题描述】：

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

相关代码sn-p是，

我在某处有一个index.md，它有这个条目avatar: './me.jpg'，在同一个文件夹下我有一个名为me.jpg 的图像文件。以及页面如何“读取”图像是通过 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 重新启动它，但它并没有解决问题

【问题讨论】：

可能是捆绑器/打包器问题，发生这种情况时尝试重新启动捆绑器。
确保您的所有gatsby 和gatsby-* 软件包都是最新的（yarn update-interactive 是您的朋友）。锐化和图像管道存在一些缓存问题。然后您也可以运行gatsby clean 以清除缓存的转换，然后重新运行gatsby develop。

标签： reactjs graphql frontend gatsby

【解决方案1】：

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

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

【讨论】：