Having trouble with the onLoadingComplete props in the Next.js Image component?

Question

Having trouble with the onLoadingComplete props in the Next.js Image component?

Is there a way to properly retrieve the naturalWidth and naturalHeight using the onLoadingComplete props? I tried following the documentation on https://nextjs.org/docs/api-reference/next/image#onloadingcomplete but it doesn't seem to be working. Am I missing something?

This is my function:

const handleImageLoad = (e) => {
  console.log("load", e);
};

Then I am using the following component from next.js:

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={image["data_url"]}
  alt=""
  layout="fill"
  objectFit="contain"
/>

Even though I can see the console log when the image is loaded, I'm unable to extract the natural width and height. Any suggestions why the handleImageLoad function is not being triggered in this case?

onLoadingComplete={() => handleImageLoad()}

reactjs next.js react-props nextjs-image

Answer 1

Answer №1

Edit: The issue has been resolved in version 11.1.3-canary.33

A noticeable issue is that the next/image component fails to trigger the onLoadingComplete handler when the provided src is a data URI. (It seems an issue has already been reported here regarding this.)

A temporary fix involves using Object URLs. It's possible to implement this workaround directly by following instructions from this discussion thread or related questions.

If you prefer to continue utilizing react-images-uploading, you can employ methods outlined in this forum post and others to convert the data URI to Object URL before passing it as the src for next/image. However, keep in mind this will result in a heavier performance load compared to handling the uploaded file manually.

Here is a practical demonstration: https://codesandbox.io/s/jolly-ellis-4htdl?file=/pages/index.js

Adding an alternative solution just for completeness:

import { useState } from "react";
import Image from "next/image";

const IndexPage = () => {
  const [src, setSrc] = useState("");

  const handleChange = (e) => {
    setSrc(URL.createObjectURL(e.target.files[0]));
    return true;
  };

  const handleImageLoad = (e) => {
    console.log("load", e);
  };

  return (
    <>
      <input
        type="file"
        id="foo"
        name="foo"
        accept="image/png, image/jpeg"
        onChange={handleChange}
      />
      <div
        style={{
          marginTop: "1rem",
          width: 600,
          height: 600,
          backgroundColor: "blue",
          position: "relative"
        }}
      >
        {src?.length > 0 && (
          <Image
            onLoadingComplete={(e) => {
              handleImageLoad(e);
            }}
            src={src}
            alt=""
            layout="fill"
            objectFit="contain"
          />
        )}
      </div>
    </>
  );
};

export default IndexPage;

Answer 2

Edit: The issue has been resolved in version 11.1.3-canary.33

A noticeable issue is that the next/image component fails to trigger the onLoadingComplete handler when the provided src is a data URI. (It seems an issue has already been reported here regarding this.)

A temporary fix involves using Object URLs. It's possible to implement this workaround directly by following instructions from this discussion thread or related questions.

If you prefer to continue utilizing react-images-uploading, you can employ methods outlined in this forum post and others to convert the data URI to Object URL before passing it as the src for next/image. However, keep in mind this will result in a heavier performance load compared to handling the uploaded file manually.

Here is a practical demonstration: https://codesandbox.io/s/jolly-ellis-4htdl?file=/pages/index.js

Adding an alternative solution just for completeness:

import { useState } from "react";
import Image from "next/image";

const IndexPage = () => {
  const [src, setSrc] = useState("");

  const handleChange = (e) => {
    setSrc(URL.createObjectURL(e.target.files[0]));
    return true;
  };

  const handleImageLoad = (e) => {
    console.log("load", e);
  };

  return (
    <>
      <input
        type="file"
        id="foo"
        name="foo"
        accept="image/png, image/jpeg"
        onChange={handleChange}
      />
      <div
        style={{
          marginTop: "1rem",
          width: 600,
          height: 600,
          backgroundColor: "blue",
          position: "relative"
        }}
      >
        {src?.length > 0 && (
          <Image
            onLoadingComplete={(e) => {
              handleImageLoad(e);
            }}
            src={src}
            alt=""
            layout="fill"
            objectFit="contain"
          />
        )}
      </div>
    </>
  );
};

export default IndexPage;

Answer 3

Answer №2

I recently faced a similar issue where I wanted to display an image only after it had finished loading.

It appears that if you use display:none in the styling, the onLoadingComplete function will not trigger, like this:

<Image

    ...

    style={{
        display: "none"
    }}

    onLoadingComplete={(img) => { // this will not be invoked
        img.style.opacity = "block"
    }}
/>

To solve this problem, I had to implement a different styling approach and include an empty onError function (to ensure that onLoadingComplete is only called when the image source is valid and loaded):

<Image

    ...

    style={{
        visibility: "hidden",
        maxHeight: "0",
        maxWidth: "0"
    }}

    onLoadingComplete={(img) => {
        img.style.visibility = "visible"
        img.style.maxHeight = "none"
        img.style.maxWidth = "none"
    }}

    onError={() => {}}
/>

This solution was specifically tested with Next.js version 13.5.3

Answer 4

I recently faced a similar issue where I wanted to display an image only after it had finished loading.

It appears that if you use display:none in the styling, the onLoadingComplete function will not trigger, like this:

<Image

    ...

    style={{
        display: "none"
    }}

    onLoadingComplete={(img) => { // this will not be invoked
        img.style.opacity = "block"
    }}
/>

To solve this problem, I had to implement a different styling approach and include an empty onError function (to ensure that onLoadingComplete is only called when the image source is valid and loaded):

<Image

    ...

    style={{
        visibility: "hidden",
        maxHeight: "0",
        maxWidth: "0"
    }}

    onLoadingComplete={(img) => {
        img.style.visibility = "visible"
        img.style.maxHeight = "none"
        img.style.maxWidth = "none"
    }}

    onError={() => {}}
/>

This solution was specifically tested with Next.js version 13.5.3

Having trouble with the onLoadingComplete props in the Next.js Image component?

Answer №1

Answer №2

Similar questions

Whenever I make changes to a record in the MERN stack, the object ends up getting deleted

React Hook useEffect is throwing an error due to missing dependencies: 'dispatch' and 'logout'. To resolve this, make sure to include them in the dependency array or remove the array altogether

What causes userAgent to be undefined within _app.tsx during the use of getInitialProps?

Struggling to make Typescript recognize the css prop (emotion) when styling Material-UI components

Successful Implementation of S3 and MongoDB File Upload feature in Next.js 14 Application

Connect Datadog to NextJs using the app router

How to eliminate the bottom border in Material UI TextField

Input a new value into the registration field to update it

Date Range Selection Widget malfunctioning when used within a popup modal

When using middleware in Next JS, the manifest fails to load during redirection

When utilizing getServerSideProps in Next.js for SSR, the graphql context may be found to be

What is the proper way to manage the refresh token on the client's end within a JWT system?

Learn how to default export React with withRouter, all while taking advantage of Material UI's makeStyles

"Encountering an issue with Next.js where the Redux

Arrays contain multiple elements, not just a single item

Avoiding Access-Control-Allow-Origin cors issue when integrating with Stripe

Using a React component with Material-UI style classes in TypeScript is not possible

What are the steps to properly set up an external image loader in next.js?

Issue with Dismissing Material UI Snackbar

What is the process of deselecting a RadioButton?