[BUG] - [Avatar] Double fetch with custom ImgComponent

[soranoo]

trafficstars

NextUI Version

2.4.8

Describe the bug

'use client';

import NextImage from 'next/image';
import { Avatar } from '@nextui-org/react';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Avatar
        src="<image_1>"
        ImgComponent={NextImage}
        imgProps={{
          width: 500,
          height: 500,
          src: "<image_2>",
        }}
      />
      <p>refresh the page and see the network tab.</p>
      <p>Now: both image will be loaded</p>
      <p>Expected: only the one image should be loaded</p>
    </main>
  );
}

Both images 1 and 2 will be fetched when using custom ImgComponent. In my situation, I set an image in the image_1 position and image 1 got fetched 2 times in a row. (for demo I put two different images)

Your Example Website or App

https://stackblitz.com/edit/nextui-issue-1

Steps to Reproduce the Bug or Issue

1. Wait until the dep downloaded
2. Open the browser console
3. Refresh the page and see the console network tab

Expected behavior

only the one image should be fetched

Screenshots or Videos

No response

Operating System Version

Windows 11

Browser

Chrome

[linear[bot]]

ENG-1430 [BUG] - [Avatar] Double fetch with custom ImgComponent

[ryo-manba]

I don't think you shouldn't need to pass src to imgProps.

[soranoo]

Yes, it just for demonstration.

My setup,

1. I put nextjs image component for image optimization
2. A url with optimization (eg. /image_a?width=50&quality=50) will be fetched (generated by nextjs image laoder)
3. BUT after the optimizated image request, an image with no optimization param also got fetch

[soranoo]

After removed the src from imgprops, same url got fetch twice

[yadavshubham01]

done 👍

[romanticsoul]

+1 The same problem occurs when using the main Image component from HeroUI.