Image Component doesn't forwardsRef

[piotrzaborow]

Bug report

Describe the bug

Refs aren't properly supported in Image.

import React, { useState, useCallback } from 'react'
import Image from 'next/image'

const NextImage = ({ src }) => {
    const [width, setWidth] = useState(0)
    const [height, setHeight] = useState(0)

    const ref = useCallback((node) => {
        console.log(node)
    }, [])

    return <Image ref={ref} src={src} width={width} height={height} />
}

This code shows that Image does not forwardRef to img DOM element.

To Reproduce

1. Add Image component to your page
2. Add ref via useCallback hook
3. Try to do something within callback function

Expected behavior

Image component should pass ref function to img element.

System information

• OS: macOS
• Browser (if applies) [Chrome, Safari]
• Version of Next.js: 10.0.0
• Version of Node.js: 15.0.0

[Timer]

Would you expect this to go to the top-level wrapper or the <img /> component? Could you please explain the use-case and what you're trying to do?

[piotrzaborow]

I'm building an Image Component based that on Next/Image. I want it set width and height based on it's parent. I had this working on classic img.

I am using useCallback to get parent's dimensions and Set it as a state to use in Next/Image.

[yesmeck]

My use-case is adding a link to the image, the Link passes ref to it's child component.

import Image from 'next/image';
import Link from 'next/link';

<Link href="/">
  <Image src="logo.png" />
</Link>

[Timer]

I'm building an Image Component based that on Next/Image. I want it set width and height based on it's parent. I had this working on classic img.

You do not need a ref for this behavior. The Image component already works like this with its intrinsic behavior.

[piotrzaborow]

Two things:

1. I want to use image transformations in the cloud (my cms provider has an API for this)
2. The thing that I want to do should work with

• 'intrinsic': it still needs a width and height property and in my opinion image should take the dimensions of parent and try to scale to it.

• 'fill' layout: There's a bug in my opinion.

I tried with code written below:

<div style={{width:'20px', height:'20px'}}>
  <Image src='image.src' layout='fill' />
</div>

Original image dimension is 4000px by 4000px. Image should respect parent's width and height when used layout ='fill', but it doesn't work as the documentation describes it. Image is on the whole viewport.

[Timer]

You must use position: 'relative':

<div style={{position: 'relative', width: '20px', height: '20px'}}>
  <Image src='image.src' layout='fill' />
</div>

[samjusaitis]

Would you expect this to go to the top-level wrapper or the <img /> component? Could you please explain the use-case and what you're trying to do?

I would expect it to go to the component similarly to all other props not referenced by next/image.

My use case is wanting to programatically determine if the image has loaded yet, and toggle a className based on that.

[nelsieborja]

+Refs via useRef hook.

[aulneau]

@Timer I would also love for this to forward refs, there are many reasons why this is important, as listed above. The ref should go to the underlying img tag in my mind.

Thanks!

[Xetera]

For extra context, the Image component exposes an onLoad event but adding onLoad does not reliably work for server side rendered images, the solution is checking img.complete on the ref instead. Not having a ref for the Image component prevents us from doing that kind of check for cases like rendering a skeleton while an image is loading.

[mattrossman]

Echoing @Xetera, a reliable way to detect the load state of an image is required in order to animate its entrance with react-spring, so I would expect access to the img element.

[TooTallNate]

I need a reference to the <img> element in order to define an ontransitionend event handler.

Update: You can set the onTransitionEnd prop on the Image component, and it will be passed through to the img. This probably works for most cases.

I think this issue is still valid though because for my particular use case it is easier to assign the event handler manually (currently I'm storing a ref to the parent element and then doing a ref.querySelector() call).

[sigrundis]

+1 on wanting to pass ref down to to be able to access "imgRef.current.complete".

I want to use the next/image component for the Automatic Image Optimization, but I want to trigger an animation when the image is loaded.

Does anyone have a suggestion about workaround in the meantime?

[f0rr0]

How would one go about using any kind of animation library (say framer motion in my case) with the Image component if framer can't attach it's ref onto the container?

There should be affordance to add a user defined ref on the image as well as the container div.

Also currently I don't think this component is usable with framer even if ref is added because the layout prop collides with framer motion's layout prop.

[pffigueiredo]

We are currently using 'react-content-loader' as our skeleton/animation lib, and this is how we handled not having access to the next image ref.

We are basically setting the image as imgLoaded, when it's not hidden anymore (by the visibility property in the element's style attribute). It was the best we could came up, at least in terms of syncing when the image was ready to be showed to the user and removing the loader.

const ExampleImage = (): ReactElement => {
  const [imgLoaded, setImgLoaded] = useState(false);

  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>): void => {
    const target = event.target as HTMLImageElement;
    if (target.complete && target.style.visibility !== 'hidden') {
      setImgLoaded(true);
    }
  };

  return (
    <Box>
      {!imgLoaded && <Loader />}
      <Box height={imgHeight}>
        <Image src={imgSrc} onLoad={handleImageLoad} alt={imgAlt} layout="fill" />
      </Box>
    </Box>
  );
};

[Weffe]

I also support being able to forward a ref to the root image element. In my case I need it for a feature I am building out with framer-motion and need access to the image's complete property.

I've opened up PR #22482 that should address this issue.

[jrydberg]

One thing I'm looking into is being able to extract the dominant colors from an image. Would be useful to have a ref to the img for that.

[enterframe]

+1

[TommySorensen]

@pffigueiredo
There is also a different solution to knowing when the image is loaded. You can avoid looking for the 1x1 gif file so the onLoad event is only fired on the actual image.

const ExampleImage = () => {
  const [imgLoaded, setImgLoaded] = useState(false);

  return (
    <Image
      width={100}
      height={100}
      onLoad={event => {
        // next/image use an 1x1 px git as placeholder. We only want the onLoad event on the actual image
        if (event.target.src.indexOf('data:image/gif;base64') < 0) {
          setImgLoaded(true)
        }
      }}
    />
  );
};

[styfle]

Hi everyone, thanks for the feedback!

I read through all the comments here and it seems the majority use cases for ref could be solved by adding a new prop onLoadingComplete().

Does that sounds like a good solution? 👍 or 👎

[timneutkens]

If replying with 👎 to @styfle's post please share the case that you're trying to solve by having access to ref so that it can be considered as well 👍

[styfle]

We released onLoadingComplete() today in [email protected].

Try it out now with yarn add next@canary, thanks!

[yume-chan]

My use case: query image natural size, animate it using DOM API.

Other use cases already mentioned by others:

1. Query element size.
2. Use with other animation library that's not React specific or use DOM API for performance reason.
3. Draw it onto canvas.

[Kerosz]

I would also prefer the ref approach, my use case is doing animations that will require me to have access to the image element. I'm not sure what the implications of adding the option to forwardRef's would be, as I've not looked into how the Image component works exactly, but it would be nice to have that option enabled for whoever wants to use it.

[styfle]

We can handle the "query image natural size" use case by returning those values in onLoadingComplete().

See #27213 (comment) for my suggestion.

Update: See the docs https://nextjs.org/docs/api-reference/next/image#onloadingcomplete

[harisraharjo]

If replying with 👎 to @styfle's post please share the case that you're trying to solve by having access to ref so that it can be considered as well 👍

How about when trying to use tensorflow mobilenet?
The scenario is this:

1. User upload their image and create the URL
2. preview the image with next/image or img tag. In Here we put the URL as the src and reference this tag's ref to a useRef variable
3. execute model.classify method from tensorflow with the useRef variable value

The scenario above won't work with next/image because next/image doesn't forward it's ref

Here is the model.classify method snippet. Source: https://github.com/tensorflow/tfjs-models/tree/master/mobilenet
model.classify( img: tf.Tensor3D | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, topk?: number )

[dbismut]

I want to animate the Image component when it enters the viewport. At this point, the only solution seems to be wrapping the Image component inside a div that I can pass a ref to (which btw triggers a warning in dev mode about its position being static).

[dbismut]

Is there any updates on this? As it's been said before, triggering animation based on when the image shows on screen requires getting a ref of some sort, except if I'm missing something.

Is there a problem with passing the ref to the img tag or the wrapping div? Or remove the warning about static positioning?

[luigi-derson]

In my case I would like to remove the inline styles you add to the image element when using placeholder="blur"

next.js/packages/next/client/image.tsx

Line 268 in 80ec93d

img.style.filter = 'none'

I'm adding styles to the image that are being overridden by those inline styles.

[styfle]

@luigi-derson This looks like a bug, no need for ref.

This will be fixed in PR #32623, thanks!

[luigi-derson]

@luigi-derson This looks like a bug, no need for ref.

This will be fixed in PR #32623, thanks!

It's all right! Isn't it the same for the next two lines? backgroundSize and backgroundImage?

[maciekgrzybek]

Are there any updates on this? I have a use case where I need to get the image data and put it on the canvas - so I need a ref for that. Would be awesome to have this :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.