The image is hidden when the source is a link

[mohannadhanafi]

I encountered an issue when trying to use an image from the backend (e.g., a logo) as the source for the ImageColorPicker component.

When I use a locally imported image from the project (e.g., mainLogoImg), the ImageColorPicker works perfectly: the image is displayed, and I can successfully pick colors from it. However, when I use an image URL fetched from the backend (logoUrl), the image does not appear, and the picker defaults to selecting a black color (rgb(0, 0, 0)).

Here’s the relevant code snippet:

<ImageColorPicker
  onColorPick={handleColorPick}
  imgSrc={logoUrl} // Image URL from backend
  zoom={2}
/>

Observations:

• When imgSrc is set to a locally imported image (e.g., mainLogoImg), everything works as expected.
• When imgSrc is set to the URL fetched from the backend (e.g., logoUrl), the image fails to render in the picker, and the color defaults to rgb(0, 0, 0).

Additional Information:

• Example of a backend URL used: https://example.com/path/to/image.png
• Example of a working local import:

import mainLogoImg from './assets/logo.png';