Question

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

相关代码段为

我在某个地方有一个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重新启动它，但是它不能解决问题

Answer 1

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

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

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

1 个答案: