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.