Swap image source with gatsby-image

[wmcheung]

A quick question, is it possible to swap images using gatsby-image?

The query I'm using in my Image component is:

query {
              allImageSharp {
                edges {
                  node {
                    ... on ImageSharp {
                      fluid(maxWidth: 1250) {
                        ...GatsbyImageSharpFluid,
                        originalName
                      }
                    }
                  }
                }
              }
            }

This looks for the file name in my Image component which is sent to the gatbsy-image.

const image = data.allImageSharp.edges.find( (e) => {
              if (e.node.fluid.originalName === this.props.src) {
                return e.node;
              }
            });

<Img fluid={image.node.fluid} />

What should happen is if I create an onClick and I choose to change it into image-2.png, it should show the new image. The image gets replaced but it remains to show the blurred version.

Here is a GIF of what is happening https://cl.ly/c2729110e408

Much appreciated for your help!

[jonniebigodes]

@wmcheung this is related to #8707 . I've been testing out and you can get a "false positive" running on development mode. You can change it at will. The real issue is when you start a production build. I'm testing to see if i can solve that issue if yo ucan, be on the lookout for that one and see if it helps

[wmcheung]

@jonniebigodes issue #11303 solved my problem.

[jonniebigodes]

@wmcheung glad you fixed your issue.

[carlrosell]

I will reopen this one as the PR is not merged yet and this is still a problem