[@mantine/core] Image: Fix incorrect behavior when src changes to `…

…null` after initial render (#3098)

If you render an Image component with a valid src, then update the src prop to
null, the placeholder does not render. With this fix, the placeholder will be
properly rendered when the component updates.

src/mantine-core/src/Image/Image.test.tsx

@@ -45,6 +45,13 @@ describe('@mantine/core/Image', () => {
     expect(withoutPlaceholder.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(0);
   });
 
+  it('renders a placeholder after having src updated to null', () => {
+    const { rerender, container } = render(<Image src="test-src" withPlaceholder />);
+    expect(container.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(0);
+    rerender(<Image src={null} withPlaceholder />);
+    expect(container.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(1);
+  });
+
   it('renders given caption', () => {
     const { container: withoutCaption } = render(<Image src="test" />);
     const { container: withCaption } = render(<Image src="test" caption="test-caption" />);

src/mantine-core/src/Image/Image.tsx

@@ -82,7 +82,7 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps,
   const isPlaceholder = withPlaceholder && error;
 
   useDidUpdate(() => {
-    setError(false);
+    setError(!src);
   }, [src]);
 
   return (