Skip to content

Commit

Permalink
Fixing image onerror callback function so it doesn't infinite loop
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdwinGuzman
EdwinGuzman committed Jan 7, 2025
1 parent 7092fa2 commit 0137337
Show file tree
Hide file tree
Showing 11 changed files with 19 additions and 60 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@nypl/design-system-react-components",
"version": "3.5.1",
"version": "3.5.2-rc",
"description": "NYPL Reservoir Design System React Components",
"repository": {
"type": "git",
Expand Down
8 changes: 0 additions & 8 deletions src/components/Card/__snapshots__/Card.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
alt="Alt text"
className="css-0"
id="img-id-regularCard"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -66,7 +65,6 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
alt="Alt text"
className="css-0"
id="img-id-cardWithExtendedStyles"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -144,7 +142,6 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
alt="Alt text"
className="css-0"
id="img-id-cardWithNoCTAs"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -191,7 +188,6 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
alt="Alt text"
className="css-0"
id="img-id-cardWithNoContent"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -327,7 +323,6 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
alt="Alt text"
className="css-0"
id="img-id-fullclick"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -383,7 +378,6 @@ exports[`Card Renders the UI snapshot correctly 7`] = `
alt="Alt text"
className="css-0"
id="img-id-cardWithRightActions"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -446,7 +440,6 @@ exports[`Card Renders the UI snapshot correctly 8`] = `
alt="Alt text"
className="css-0"
id="img-id-chakraProps"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -498,7 +491,6 @@ exports[`Card Renders the UI snapshot correctly 9`] = `
alt="Alt text"
className="css-0"
id="img-id-otherProps"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down
6 changes: 0 additions & 6 deletions src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ exports[`Renders the UI snapshot correctly 1`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -82,7 +81,6 @@ exports[`Renders the UI snapshot correctly 2`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -145,7 +143,6 @@ exports[`Renders the UI snapshot correctly 3`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -208,7 +205,6 @@ exports[`Renders the UI snapshot correctly 4`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -271,7 +267,6 @@ exports[`Renders the UI snapshot correctly 5`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -334,7 +329,6 @@ exports[`Renders the UI snapshot correctly 6`] = `
alt="Image example"
className="css-0"
id={null}
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down
7 changes: 0 additions & 7 deletions src/components/Hero/__snapshots__/Hero.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ exports[`Hero Renders the UI snapshot correctly 2`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -102,7 +101,6 @@ exports[`Hero Renders the UI snapshot correctly 3`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -148,7 +146,6 @@ exports[`Hero Renders the UI snapshot correctly 4`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -194,7 +191,6 @@ exports[`Hero Renders the UI snapshot correctly 5`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -240,7 +236,6 @@ exports[`Hero Renders the UI snapshot correctly 6`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -318,7 +313,6 @@ exports[`Hero Renders the UI snapshot correctly 8`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down Expand Up @@ -368,7 +362,6 @@ exports[`Hero Renders the UI snapshot correctly 9`] = `
alt="Image example"
className="css-0"
id="image-example"
onError={[Function]}
src="https://images.nypl.org/index.php?id=swope_243048&t=r"
/>
</div>
Expand Down
11 changes: 7 additions & 4 deletions src/components/Image/Image.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { changelogData } from "./imageChangelogData";

# Image

| Component Version | DS Version |
| ----------------- | ---------- |
| Added | `0.0.6` |
| Latest | `3.3.1` |
| Component Version | DS Version |
| ----------------- | ------------ |
| Added | `0.0.6` |
| Latest | `Prerelease` |

## Table of Contents

Expand Down Expand Up @@ -123,6 +123,9 @@ be logged to the console when the error occurs and the fallback image is loaded.
If an _additional_ action needs to be performed when the fallback image is
loaded, pass a callback function to the `onError` prop.

NOTE: if no `fallbackSrc` prop is passed, the `Image` component will not call
the `onerror` image attribute.

<Source
code={`
<Image
Expand Down
4 changes: 2 additions & 2 deletions src/components/Image/Image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export const Image: ChakraComponent<
"NYPL Reservoir Image: The initial image failed to load in the " +
"browser. The fallback image source will now be used."
);
(event.target as any).src = fallbackSrc || "";
(event.target as any).src = fallbackSrc;
onError && onError(event);
};
let imageComponent: JSX.Element | null = null;
Expand Down Expand Up @@ -229,7 +229,7 @@ export const Image: ChakraComponent<
alt={alt}
id={id ? id : null}
loading={isLazy ? "lazy" : undefined}
onError={onImageError}
onError={fallbackSrc && onImageError}
{...srcProp}
__css={{ ...styles.img, ...additionalImageStyles }}
{...rest}
Expand Down
Loading

0 comments on commit 0137337

Please sign in to comment.