Not working with gatsby image plugin (StaticImage)

[rpearce]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

@lezan reported an issue with using the gatsby-image-plugin here: #274 (reply in thread). They graciously provided a examples:

• Test repo: https://github.com/lezan/zoom-test-gatsby
• Online demo: https://codesandbox.io/s/sharp-pike-fzr2ye?file=/src/pages/index.js

[rpearce]

After a good deal of investigation tonight, it looks like the actual <img> element we want to hook into isn't present on the page at all at render time. If there's no image on the page, the querySelector code can't find it, and it's difficult to know when the image is actually injected onto the page (would I need an expensive MutationObserver?).

Luckily, the Gatsby component in question has an onLoad callback, so here's a workaround:

import React, { useCallback, useState } from "react"
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

// ... then in your component

const [isImgLoaded, setIsImgLoaded] = useState(false)
const handleImgLoad = useCallback(() => setIsImgLoaded(true), [])
const ZoomComp = isImgLoaded ? Zoom : 'div'

// ... then

<ZoomComp>
  <StaticImage
    src="../images/earth-large.jpg"
    alt="test image for test"
    onLoad={handleImgLoad}
    placeholder="blurred"
    layout="constrained"
    width={1920}
    height={1080}
    className="image-zoom"
  />
</ZoomComp>

[rpearce]

While this works for gatsby develop, it's looking like this doesn't work after gatsby build because the onLoad isn't getting fired :(

I'll keep trying in the next couple of nights.

[rpearce]

Update: I've almost got it perfect, but the zoom causes a little flash on the first load. Almost there!

[rpearce]

Update: I've figured it out. I'll do some more testing and put up a PR tonight, I think.

[rpearce]

My solution at present is with using some exponential backoff recursion (sounds way fancier than it is), but I'm going to try to see if I can do a simple MutationObserver, instead. It would only be used in the event that an image wasn't found, and then it would stop observing once one was found.

[rpearce]

This should be fixed in react-medium-image-zoom@5.0.2-beta.0, and I plan on releasing 5.0.2 in the next couple of days.

[lezan]

Hello @rpearce, it seems the issue is still here but different in someway. Not sure if I did something wrong, but you can check the online example and also the repo (they are both updated).

[rpearce]

@lezan I'll check it out very soon! I've got some time.

[rpearce]

@lezan Did you run yarn install after you merged the code (you need to)? I just merged your upstream code into my fork, and it's working on macOS in Chrome, Firefox, and Safari.